231 lines
8.4 KiB
HTML
231 lines
8.4 KiB
HTML
<!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);
|
|
|
|
// log all events
|
|
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>
|