1<!doctype html> 2<html> 3 <head> 4 <title>preload test</title> 5 <meta name="viewport" content="width=device-width"> 6 <style type="text/css" media="screen"> 7 body { font-family: georgia, serif; background: gray; } 8 video { background: yellow; } 9 .info { background-color:#e3e3f3; padding:10px; border:1px solid #9c9; width:600px; } 10 .info table { background: #fff; width:600px; } 11 .info td { border:1px solid; border-color:#fff #bbb #bbb #fff; background-color:#fff; padding:2px; font-size:.7em; width:50%;} 12 #event_log { background: #fff; font-size:.5em; width: 100%; } 13 #refresh { margin-top:10px; } 14 </style> 15 16 <script> 17 document.addEventListener('loadedmetadata', querymovie); 18 document.addEventListener('waiting', querymovie); 19 document.addEventListener('error', querymovie); 20 document.addEventListener('durationchange', querymovie); 21 document.addEventListener('error', querymovie); 22 document.addEventListener('stalled', querymovie); 23 document.addEventListener('canplay', querymovie); 24 25 // log all events 26 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"]; 27 for (var i=0; i < events.length; i++) 28 document.addEventListener(events[i], logProgress, true); 29 30 function printTimeRangeValue(element, prop) 31 { 32 var range; 33 34 if (prop == 'Max time buffered') 35 range = element.buffered; 36 else if (prop == "Max time seekable") 37 range = element.seekable; 38 else 39 alert(prop); 40 if (!range) 41 return "undefined"; 42 43 if (range.length) 44 return range.start(0).toFixed(2) + ".." + range.end(0).toFixed(2) + " [length =" + range.length + "]"; 45 return "[range length = " + range.length + "]"; 46 } 47 48 function statePropertyValue(element, prop) 49 { 50 var readyNames = ['HAVE_NOTHING', 'HAVE_METADATA', 'HAVE_CURRENT_DATA', 'HAVE_FUTURE_DATA', 'HAVE_ENOUGH_DATA']; 51 var networkNames = ['NETWORK_EMPTY', 'NETWORK_IDLE', 'NETWORK_LOADING', 'NETWORK_LOADED', 'NETWORK_NO_SOURCE']; 52 var value; 53 54 if (prop== 'Ready State') 55 value = readyNames[element.readyState]; 56 else 57 value = networkNames[element.networkState]; 58 return value; 59 } 60 61 function querymovie(evt) 62 { 63 var movieProperties = 64 [ 65 ["Source", "src"], 66 ["Current Source", "currentSrc"], 67 ["Duration", "duration"], 68 ["Video Width", "videoWidth"], 69 ["Video Height", "videoHeight"], 70 ["Default Playback Rate", "defaultPlaybackRate"], 71 ["Volume", "volume"], 72 ["Preload", "preload"], 73 ["Ready State", statePropertyValue], 74 ["Network State", statePropertyValue], 75 ["Max time buffered", printTimeRangeValue], 76 ["Max time seekable", printTimeRangeValue] 77 ]; 78 79 var vid = evt ? evt.target : document.getElementById('vid'); 80 for (var i = 0; i < movieProperties.length; i++) 81 { 82 var prop = movieProperties[i]; 83 var val; 84 85 if (typeof prop[1] == 'function') 86 val = prop[1](vid, prop[0]); 87 else 88 val = vid[prop[1]]; 89 90 if (typeof val == 'number') 91 val = val.toFixed(2); 92 else if (typeof val == "undefined") 93 val = "undefined"; 94 document.getElementById(prop[0]).innerHTML = val; 95 } 96 } 97 98 function setURL(url) 99 { 100 var vid = document.getElementById("vid"); 101 102 logMsg(vid, "###############"); 103 logMsg(vid, "##### setting url to " + url); 104 if ( url != "" ) 105 { 106 vid.src = url; 107 vid.load(); 108 } 109 } 110 111 function clockTime() 112 { 113 var now = new Date(); 114 var hour = now.getHours(); 115 var minute = now.getMinutes(); 116 var second = now.getSeconds(); 117 var milli = now.getMilliseconds(); 118 if (hour > 12) 119 hour = hour - 12; 120 else if (hour == 0) 121 hour = 12; 122 if (hour < 10) 123 hour = "0" + hour; 124 if (minute < 10) 125 minute = "0" + minute; 126 if (second < 10) 127 second = "0" + second; 128 if (milli < 10) 129 milli = "00" + milli; 130 else if (milli < 100) 131 milli = "0" + milli; 132 133 return hour + ':' + minute + ':' + second + '.' + milli; 134 } 135 136 function logMsg(vid, msg) 137 { 138 document.getElementById('event_log').value += clockTime() + " - " + msg + ' \r'; 139 } 140 141 function clearlog() 142 { 143 document.getElementById('event_log').value = ''; 144 } 145 146 function logProgress(ev) 147 { 148 var vid = ev.target; 149 150 if (ev.type == 'timeupdate') 151 { 152 var logTimeupdate = document.getElementById('log-timeupdate'); 153 if (!logTimeupdate.checked) 154 return; 155 } 156 if (ev.type == 'progress') 157 { 158 var logTimeupdate = document.getElementById('log-progress'); 159 if (!logTimeupdate.checked) 160 return; 161 } 162 163 logMsg(vid, ev.type + ' (time = ' + vid.currentTime.toFixed(2) + ')'); 164 } 165 166 function logError(ev) 167 { 168 var vid = ev.target; 169 logMsg(vid, "vid.error = " + vid.error.code); 170 } 171 172 173 function preload(value) 174 { 175 var vid = document.getElementById("vid"); 176 var old = vid.preload; 177 vid.preload=value; 178 querymovie(); 179 } 180 </script> 181 182</head> 183 184<body onload="querymovie()"> 185 <p> 186 <video id="vid" src="http://trailers.apple.com/movies/weinstein/submarine/submarine-tlr1_480p.mov" height="391" 187 controls preload="metadata"> 188 </video> 189 </p> 190 <p> 191 <button id="controls" onclick="preload('none')">preload=none</button> 192 <button id="controls" onclick="preload('metadata')">preload=metadata</button> 193 <button id="controls" onclick="preload('auto')">preload=auto</button> 194 </p> 195 196 <div class="info"> 197 <input id="querymovie" type="button" value="Refresh" onclick="querymovie()"> 198 <br> 199 <table> 200 <tbody> 201 <tr><td>Preload</td><td id="Preload"></td></tr> 202 <tr><td>Error</td><td id="Error"></td></tr> 203 <tr><td>Duration</td> <td id="Duration"></td></tr> 204 <tr><td>Video Width</td><td id="Video Width"></td></tr> 205 <tr><td>Video Height</td><td id="Video Height"></td></tr> 206 <tr><td>Default Playback Rate</td><td id="Default Playback Rate"></td></tr> 207 <tr><td>Volume</td><td id="Volume"></td></tr> 208 <tr><td>Ready State</td><td id="Ready State"></td></tr> 209 <tr><td>Network State</td><td id="Network State"></td></tr> 210 <tr><td>Max time buffered</td><td id="Max time buffered"></td></tr> 211 <tr><td>Max time seekable</td><td id="Max time seekable"></td></tr> 212 <tr><td>Source</td><td id="Source"></td></tr> 213 <tr><td>Current Source </td> <td id="Current Source"></td></tr> 214 </tbody> 215 </table> 216 </div> 217 218 <br> 219 <div class="info"> 220 Enter a url:<input type="text" size="90" maxlength="2048" onchange="setURL(this.value)" > 221 <br> 222 <input id="clear_log" type="button" value="Clear" onclick="clearlog()"> 223 <input type="checkbox" id="log-progress"> log 'progress' events 224 <input type="checkbox" checked id="log-timeupdate"> log 'timeupdate' events 225 <textarea rows=30 cols=30 id=event_log></textarea> 226 <div id="event_log"></div> 227 </div> 228 229</body> 230</html> 231