HTML5 local video file player example
HTML
<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*"/>
<video controls autoplay></video>
CSS
video, input {
display: block;
}
input {
width: 100%;
}
.info {
background-color: aqua;
}
.error {
background-color: red;
color: white;
}
JavaScript
(function localFileVideoPlayerInit(win) {
var URL = 'blob:https://upornia.com/c0329a0f-45ba-42ac-a6be-8b730a453ac9' || 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');
...