HTML5 local video file size assessment
HTML
<h1>HTML5 local video file size assessment</h1>
<div id="message-container"></div>
<input type="file" multiple />
CSS
video,
input {
display: block;
}
input {
width: 100%;
}
.info {
background-color: aqua;
}
.error {
background-color: red;
color: white;
}
JavaScript
(function localFileVideoPlayerInit(win) {
var videoNode = document.createElement("video");
var URL = win.URL || win.webkitURL;
var videoEvents = ['loadedmetadata', 'canplay', 'canplaythrough'];
var eventFired = {};
var videoAssessed = false;
var displayMessage = (function displayMessageInit() {
var container = document.querySelector('#message-container');
return function displayMessage(message, isError) {
if (message === false) {
while (container.firstChild) {
container.removeChild(container.firstChild);
}
return;
}
var node = document.createElement("div");
node.innerHTML = message;
node.className = isError ? 'error' : 'info';
container.appendChild(node);
};
}());
var resetVideo = function() {
videoNode.src = null;
};
var allEventsFired = function() {
var allFired = true;
for (var i = 0; i < videoEvents.length; i++) {
allFired = allFired && (eventFired[videoEvents[i]]);
if (!allFired) { break; }
}
return allFired;
};
var assessVideoSize = function(event) {
if (allEventsFired()) {
return;
}
eventFired[event] = true;
if (videoAssessed) {
displayMessage("On " + event + " : video dimensions already assessed, doing nothing.", false);
return;
}
var width = videoNode.videoWidth || videoNode.width || -1;
var height = videoNode.videoHeight || videoNode.height || -1;
if ((width == -1) || (height == -1)) {
displayMessage("Video size not available at " + event, true);
if (allEventsFired()) {
displayMessage("All video events fired, unable to assess video :( ", true);
resetVideo();
...