test_played.html (8978B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Test played member for media elements</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 7 <script type="text/javascript" src="manifest.js"></script> 8 </head> 9 <body> 10 <pre id='test'> 11 <script class="testbody" type='application/javascript'> 12 13 let manager = new MediaTestManager; 14 15 function finish_test(element) { 16 removeNodeAndSource(element); 17 manager.finished(element.token); 18 } 19 20 // Check that a file has been played in its entirety. 21 function check_full_file_played(element) { 22 element.addEventListener('ended', (function(e) { 23 let interval_count = e.target.played.length; 24 is(interval_count, 1, element.token + ": played.length must be 1"); 25 is(element.played.start(0), 0, element.token + ": start time shall be 0"); 26 is(element.played.end(0), e.target.duration, element.token + ": end time shall be duration"); 27 finish_test(e.target); 28 })); 29 } 30 31 var tests = [ 32 // Without playing, check that player.played.length == 0. 33 { 34 setup(element) { 35 element.addEventListener("loadedmetadata", function() { 36 is(element.played.length, 0, element.token + ": initial played.length equals zero"); 37 finish_test(element); 38 }); 39 }, 40 name: "test1" 41 }, 42 // Play the file, test the range we have. 43 { 44 setup(element) { 45 check_full_file_played(element); 46 element.play(); 47 }, 48 name: "test2" 49 }, 50 51 // Play the second half of the file, pause, play 52 // an check we have only one range. 53 { 54 setup (element) { 55 element.onended = function (e) { 56 var t = e.target; 57 t.onended = null; 58 check_full_file_played(t); 59 t.pause(); 60 t.currentTime = 0; 61 t.play(); 62 }; 63 element.addEventListener("loadedmetadata", function() { 64 element.currentTime = element.duration / 2; 65 element.play(); 66 }); 67 }, 68 name: "test3" 69 }, 70 71 // Play the first half of the file, seek back, while 72 // continuing to play. We shall have only one range. 73 { 74 setup (element) { 75 let onTimeUpdate = function() { 76 if (element.currentTime > element.duration / 2) { 77 info(element.token + ": currentTime=" + element.currentTime + ", duration=" + element.duration); 78 element.removeEventListener("timeupdate", onTimeUpdate); 79 element.pause(); 80 var oldEndRange = element.played.end(0); 81 element.currentTime = element.duration / 4; 82 is(element.played.end(0), oldEndRange, 83 element.token + ": When seeking back, |played| should not be changed"); 84 element.play(); 85 } 86 } 87 element.addEventListener("timeupdate", onTimeUpdate); 88 check_full_file_played(element); 89 element.play(); 90 }, 91 name: "test4" 92 }, 93 94 // Play and seek to have two ranges, and check that, as well a 95 // boundaries. 96 { 97 setup (element) { 98 let seekTarget = 0; 99 let onTimeUpdate = function() { 100 if (element.currentTime > element.duration / 2) { 101 info(element.token + ": currentTime=" + element.currentTime + ", duration=" + element.duration); 102 element.removeEventListener("timeupdate", onTimeUpdate); 103 element.pause(); 104 // Remember seek target for later comparison since duration may change 105 // during playback. 106 seekTarget = element.currentTime = element.duration / 10; 107 element.currentTime = seekTarget; 108 element.play(); 109 } 110 } 111 112 element.addEventListener("loadedmetadata", function() { 113 element.addEventListener("timeupdate", onTimeUpdate); 114 }); 115 116 117 element.addEventListener("ended", (function() { 118 if(element.played.length > 1) { 119 is(element.played.length, 2, element.token + ": element.played.length == 2"); 120 is(element.played.start(1), seekTarget, element.token + ": we should have seeked forward by one tenth of the duration"); 121 is(element.played.end(1), element.duration, element.token + ": end of second range shall be the total duration"); 122 } 123 is(element.played.start(0), 0, element.token + ": start of first range shall be 0"); 124 finish_test(element); 125 })); 126 127 element.play(); 128 }, 129 name: "test5" 130 }, 131 132 // Play to create two ranges, in the reverse order. check that they are sorted. 133 { 134 setup (element) { 135 function end() { 136 element.pause(); 137 let p = element.played; 138 ok(p.length >= 1, element.token + ": There should be at least one range=" + p.length); 139 is(p.start(0), seekTarget, element.token + ": Start of first range should be the sixth of the duration"); 140 ok(p.end(p.length - 1) > 5 * element.duration / 6, element.token + ": End of last range should be greater that five times the sixth of the duration"); 141 finish_test(element); 142 } 143 144 let seekTarget = 0; 145 function pauseseekrestart() { 146 element.pause(); 147 // Remember seek target for later comparison since duration may change 148 // during playback. 149 seekTarget = element.duration / 6; 150 element.currentTime = seekTarget; 151 element.play(); 152 } 153 154 function onTimeUpdate_pauseseekrestart() { 155 if (element.currentTime > 5 * element.duration / 6) { 156 element.removeEventListener("timeupdate", onTimeUpdate_pauseseekrestart); 157 pauseseekrestart(); 158 element.addEventListener("timeupdate", onTimeUpdate_end); 159 } 160 } 161 162 function onTimeUpdate_end() { 163 if (element.currentTime > 3 * element.duration / 6) { 164 element.removeEventListener("timeupdate", onTimeUpdate_end); 165 end(); 166 } 167 } 168 169 element.addEventListener("timeupdate", onTimeUpdate_pauseseekrestart); 170 171 element.addEventListener('loadedmetadata', function() { 172 element.currentTime = 4 * element.duration / 6; 173 element.play(); 174 }); 175 }, 176 name: "test6" 177 }, 178 // Seek repeatedly without playing. No range should appear. 179 { 180 setup(element) { 181 let index = 1; 182 183 element.addEventListener('seeked', function() { 184 index++; 185 element.currentTime = index * element.duration / 5; 186 is(element.played.length, 0, element.token + ": played.length should be 0"); 187 if (index == 5) { 188 finish_test(element); 189 } 190 }); 191 192 element.addEventListener('loadedmetadata', function() { 193 element.currentTime = element.duration / 5; 194 }); 195 }, 196 name: "test7" 197 }, 198 // Play for a bit, then seek to the end: two ranges when "ended" is received. 199 // Load another resource (invalid): no range 200 // Load another resource (valid): still no range 201 { 202 setup(element) { 203 let index = 1; 204 let seeked = false; 205 206 element.addEventListener('timeupdate', function() { 207 index++; 208 if (index == 2) { 209 is(element.played.length, 1); 210 element.currentTime = element.currentTime + element.duration / 100; 211 } 212 if (seeked) { 213 is(element.played.length, 2, "After seeking, played.length should be 2"); 214 } 215 }); 216 element.addEventListener('seeked', function() { 217 seeked = true; 218 }); 219 element.addEventListener('ended', function() { 220 // For very short media file, timing is unreliable, it can be that the 221 // file has finished playing, before the seek, and so there is only one 222 // range in `played`. 223 if (seeked) { 224 is(element.played.length, 2, element.token + "After ended, played.length should be 2"); 225 } else { 226 is(element.played.length, 1, element.token + "After ended, a short media file played.length should be 1 if it has ended before the seek"); 227 } 228 let src_bck = element.src; 229 element.src = "bogus.duh"; 230 is(element.played.length, 0, "After subsequent invalid load, played.length should be 0"); 231 element.src = src_bck; 232 is(element.played.length, 0, "After subsequent valid load, played.length should be 0"); 233 finish_test(element); 234 }); 235 element.addEventListener('loadedmetadata', function() { 236 element.play(); 237 }); 238 }, 239 name: "test8" 240 } 241 ]; 242 243 function createTestArray() { 244 var A = []; 245 for (var i=0; i<tests.length; i++) { 246 for (var k=0; k<gPlayedTests.length; k++) { 247 var t = {}; 248 t.setup = tests[i].setup; 249 t.name = tests[i].name + "-" + gPlayedTests[k].name; 250 t.type = gPlayedTests[k].type; 251 t.src = gPlayedTests[k].name; 252 A.push(t); 253 } 254 } 255 return A; 256 } 257 258 function startTest(test, token) { 259 var elemType = getMajorMimeType(test.type); 260 var element = document.createElement(elemType); 261 element.src = test.src; 262 element.token = token; 263 element.preload = "metadata"; 264 test.setup(element); 265 manager.started(token); 266 267 // Log events for debugging. 268 var events = ["suspend", "play", "canplay", "canplaythrough", "loadstart", "loadedmetadata", 269 "loadeddata", "playing", "ended", "error", "stalled", "emptied", "abort", 270 "waiting", "pause"]; 271 function logEvent(e) { 272 var v = e.target; 273 info(v.token + ": got " + e.type); 274 } 275 events.forEach(function(e) { 276 element.addEventListener(e, logEvent); 277 }); 278 279 } 280 281 282 manager.runTests(createTestArray(), startTest); 283 284 </script> 285 </pre> 286 </body> 287 </html>