(function localFileVideoPlayerInit(win) {
var URL = win.URL || win.webkitURL,
displayMessage = (function displayMessageInit() {
var node = document.querySelector('#message');
return function displayMessage(message, isError) {
node.innerHTML = message;
node.className = isError ? 'error' : 'info';
};
}()),
playSelectedFile = function playSelectedFileInit(event) {
var file = this.files[0];
var type = file.type;
var videoNode = document.querySelector('video');
var canPlay = videoNode.canPlayType(type);
canPlay = (canPlay === '' ? 'no' : canPlay);
var message = 'Can play type "' + type + '": ' + canPlay;
var isError = canPlay === 'no';
displayMessage(message, isError);
if (isError) {
return;
}
var fileURL = URL.createObjectURL(file);
videoNode.src = fileURL;
},
inputNode = document.querySelector('input');
if (!URL) {
displayMessage('Your browser is not ' +
'<a href="http://caniuse.com/bloburls">supported</a>!', true);
return;
}
inputNode.addEventListener('change', playSelectedFile, false);
}(window));
<h1>HTML5 local video file player example</h1> <div id="message"></div> <input type="file" accept="video/*"/> <video controls autoplay></video>
video, input {
display: block;
}
input {
width: 100%;
}
.info {
background-color: aqua;
}
.error {
background-color: red;
color: white;
}