ManualTests/media-elements/video-preload.html - WebKit - Git at Google

 <!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>
	<!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>