ManualTests/media-elements/video-preload.html

   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>