Unreviewed, rolling out r100835.
[WebKit-https.git] / 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>