video-preload.html [plain text]
<!doctype html>
<html>
<head>
<title>preload test</title>
<meta name="viewport" content="width=device-width">
<style type="text/css" media="screen">
body { font-family: georgia, serif; background: gray; }
video { background: yellow; }
.info { background-color:#e3e3f3; padding:10px; border:1px solid #9c9; width:600px; }
.info table { background: #fff; width:600px; }
.info td { border:1px solid; border-color:#fff #bbb #bbb #fff; background-color:#fff; padding:2px; font-size:.7em; width:50%;}
#event_log { background: #fff; font-size:.5em; width: 100%; }
#refresh { margin-top:10px; }
</style>
<script>
document.addEventListener('loadedmetadata', querymovie);
document.addEventListener('waiting', querymovie);
document.addEventListener('error', querymovie);
document.addEventListener('durationchange', querymovie);
document.addEventListener('error', querymovie);
document.addEventListener('stalled', querymovie);
document.addEventListener('canplay', querymovie);
var events = ["abort", "beforeload", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting", "webkitbeginfullscreen", "webkitendfullscreen"];
for (var i=0; i < events.length; i++)
document.addEventListener(events[i], logProgress, true);
function printTimeRangeValue(element, prop)
{
var range;
if (prop == 'Max time buffered')
range = element.buffered;
else if (prop == "Max time seekable")
range = element.seekable;
else
alert(prop);
if (!range)
return "undefined";
if (range.length)
return range.start(0).toFixed(2) + ".." + range.end(0).toFixed(2) + " [length =" + range.length + "]";
return "[range length = " + range.length + "]";
}
function statePropertyValue(element, prop)
{
var readyNames = ['HAVE_NOTHING', 'HAVE_METADATA', 'HAVE_CURRENT_DATA', 'HAVE_FUTURE_DATA', 'HAVE_ENOUGH_DATA'];
var networkNames = ['NETWORK_EMPTY', 'NETWORK_IDLE', 'NETWORK_LOADING', 'NETWORK_LOADED', 'NETWORK_NO_SOURCE'];
var value;
if (prop== 'Ready State')
value = readyNames[element.readyState];
else
value = networkNames[element.networkState];
return value;
}
function querymovie(evt)
{
var movieProperties =
[
["Source", "src"],
["Current Source", "currentSrc"],
["Duration", "duration"],
["Video Width", "videoWidth"],
["Video Height", "videoHeight"],
["Default Playback Rate", "defaultPlaybackRate"],
["Volume", "volume"],
["Preload", "preload"],
["Ready State", statePropertyValue],
["Network State", statePropertyValue],
["Max time buffered", printTimeRangeValue],
["Max time seekable", printTimeRangeValue]
];
var vid = evt ? evt.target : document.getElementById('vid');
for (var i = 0; i < movieProperties.length; i++)
{
var prop = movieProperties[i];
var val;
if (typeof prop[1] == 'function')
val = prop[1](vid, prop[0]);
else
val = vid[prop[1]];
if (typeof val == 'number')
val = val.toFixed(2);
else if (typeof val == "undefined")
val = "undefined";
document.getElementById(prop[0]).innerHTML = val;
}
}
function setURL(url)
{
var vid = document.getElementById("vid");
logMsg(vid, "###############");
logMsg(vid, "##### setting url to " + url);
if ( url != "" )
{
vid.src = url;
vid.load();
}
}
function clockTime()
{
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var milli = now.getMilliseconds();
if (hour > 12)
hour = hour - 12;
else if (hour == 0)
hour = 12;
if (hour < 10)
hour = "0" + hour;
if (minute < 10)
minute = "0" + minute;
if (second < 10)
second = "0" + second;
if (milli < 10)
milli = "00" + milli;
else if (milli < 100)
milli = "0" + milli;
return hour + ':' + minute + ':' + second + '.' + milli;
}
function logMsg(vid, msg)
{
document.getElementById('event_log').value += clockTime() + " - " + msg + ' \r';
}
function clearlog()
{
document.getElementById('event_log').value = '';
}
function logProgress(ev)
{
var vid = ev.target;
if (ev.type == 'timeupdate')
{
var logTimeupdate = document.getElementById('log-timeupdate');
if (!logTimeupdate.checked)
return;
}
if (ev.type == 'progress')
{
var logTimeupdate = document.getElementById('log-progress');
if (!logTimeupdate.checked)
return;
}
logMsg(vid, ev.type + ' (time = ' + vid.currentTime.toFixed(2) + ')');
}
function logError(ev)
{
var vid = ev.target;
logMsg(vid, "vid.error = " + vid.error.code);
}
function preload(value)
{
var vid = document.getElementById("vid");
var old = vid.preload;
vid.preload=value;
querymovie();
}
</script>
</head>
<body onload="querymovie()">
<p>
<video id="vid" src="http://trailers.apple.com/movies/weinstein/submarine/submarine-tlr1_480p.mov" height="391"
controls preload="metadata">
</video>
</p>
<p>
<button id="controls" onclick="preload('none')">preload=none</button>
<button id="controls" onclick="preload('metadata')">preload=metadata</button>
<button id="controls" onclick="preload('auto')">preload=auto</button>
</p>
<div class="info">
<input id="querymovie" type="button" value="Refresh" onclick="querymovie()">
<br>
<table>
<tbody>
<tr><td>Preload</td><td id="Preload"></td></tr>
<tr><td>Error</td><td id="Error"></td></tr>
<tr><td>Duration</td> <td id="Duration"></td></tr>
<tr><td>Video Width</td><td id="Video Width"></td></tr>
<tr><td>Video Height</td><td id="Video Height"></td></tr>
<tr><td>Default Playback Rate</td><td id="Default Playback Rate"></td></tr>
<tr><td>Volume</td><td id="Volume"></td></tr>
<tr><td>Ready State</td><td id="Ready State"></td></tr>
<tr><td>Network State</td><td id="Network State"></td></tr>
<tr><td>Max time buffered</td><td id="Max time buffered"></td></tr>
<tr><td>Max time seekable</td><td id="Max time seekable"></td></tr>
<tr><td>Source</td><td id="Source"></td></tr>
<tr><td>Current Source </td> <td id="Current Source"></td></tr>
</tbody>
</table>
</div>
<br>
<div class="info">
Enter a url:<input type="text" size="90" maxlength="2048" onchange="setURL(this.value)" >
<br>
<input id="clear_log" type="button" value="Clear" onclick="clearlog()">
<input type="checkbox" id="log-progress"> log 'progress' events
<input type="checkbox" checked id="log-timeupdate"> log 'timeupdate' events
<textarea rows=30 cols=30 id=event_log></textarea>
<div id="event_log"></div>
</div>
</body>
</html>