test_PlayEvents.html (5021B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>MSE: basic functionality</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script type="text/javascript" src="mediasource.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 8 </head> 9 <body> 10 <pre id="test"> 11 <script class="testbody" type="text/javascript"> 12 13 SimpleTest.waitForExplicitFinish(); 14 15 // This test checks that readyState is properly set and the appropriate events are being fired accordingly: 16 // 1. Load 1.6s of data and ensure that canplay event is fired. 17 // 2. Load data to have a complete buffered range from 0 to duration and ensure that canplaythrough is fired. 18 // 3. Seek to an area with no buffered data, and ensure that readyState goes back to HAVE_METADATA 19 // 4. Load 1.6s of data at the seek position and ensure that canplay is fired and that readyState is now HAVE_FUTURE_DATA 20 // 5. Start playing video and check that once it reaches a position with no data, readyState goes back to HAVE_CURRENT_DATA and waiting event is fired. 21 // 6. Add 1.6s of data once video element fired waiting, that canplay is fired once readyState is HAVE_FUTURE_DATA. 22 // 7. Finally load data to the end and ensure that canplaythrough is fired and that readyState is now HAVE_ENOUGH_DATA 23 24 runWithMSE(async (ms, el) => { 25 el.controls = true; 26 await once(ms, "sourceopen"); 27 logEvents(el); 28 ok(true, "Receive a sourceopen event"); 29 const videosb = ms.addSourceBuffer("video/mp4"); 30 el.addEventListener("error", e => { 31 ok(false, `should not fire ${e.type} event`); 32 SimpleTest.finish(); 33 }); 34 is(el.readyState, el.HAVE_NOTHING, "readyState is HAVE_NOTHING"); 35 let p = once(el, "loadedmetadata"); 36 await fetchAndLoad(videosb, "bipbop/bipbop_video", ["init"], ".mp4"); 37 await p; 38 ok(true, "got loadedmetadata event"); 39 p = Promise.all([once(el, "loadeddata"), once(el, "canplay")]); 40 await fetchAndLoad(videosb, "bipbop/bipbop_video", range(1, 3), ".m4s"); 41 await p; 42 ok(true, "got canplay event"); 43 // set element duration to 3.203333s. We do so in order to guarantee that 44 // the end of the buffered range will be equal to duration, causing 45 // canplaythrough to be fired later. 46 ms.duration = 3.203333; 47 await once(el, "durationchange"); 48 ok(true, "got durationchange event"); 49 // Load [0.801666, 3.203333] 50 p = once(el, "canplaythrough"); 51 await fetchAndLoad(videosb, "bipbop/bipbop_video", range(3, 5), ".m4s"); 52 await p; 53 ok(true, "got canplaythrough event"); 54 // set element duration to 9.203333s, this value is set to coincide with 55 // data added later (we now have an empty range from 6s to 9.203333s). 56 ms.duration = 9.203333; 57 await once(el, "durationchange"); 58 ok(true, "got durationchange event"); 59 // An arbitrary value, so we are guaranteed to be in a range with no data. 60 el.currentTime = 6; 61 videosb.timestampOffset = 6; 62 ok(el.seeking, "seeking started"); 63 await once(el, "seeking"); 64 ok(true, "got seeking event"); 65 is(el.readyState, el.HAVE_METADATA, "readyState is HAVE_METADATA"); 66 // Load [6+0, 6+1.601666) 67 p = Promise.all([once(el, "seeked"), once(el, "canplay")]); 68 await fetchAndLoad(videosb, "bipbop/bipbop_video", range(1, 3), ".m4s"); 69 await p; 70 ok(true, "got seeked and canplay event"); 71 is(el.currentTime, 6, "seeked to 6s"); 72 is(el.readyState, el.HAVE_FUTURE_DATA, "readyState is HAVE_FUTURE_DATA"); 73 // Load [6+1.60166, 6+3.203333] 74 p = once(el, "canplaythrough"); 75 await fetchAndLoad(videosb, "bipbop/bipbop_video", range(3, 5), ".m4s"); 76 await p; 77 ok(true, "got canplaythrough event"); 78 // set element duration to 19.805s, this value is set to coincide with 79 // data added later (we now have an empty range from 15 to 19.805). 80 ms.duration = 19.805; 81 await once(el, "durationchange"); 82 ok(true, "got durationchange event"); 83 el.currentTime = 15; 84 videosb.timestampOffset = 15; 85 ok(el.seeking, "seeking started"); 86 await once(el, "seeking"); 87 ok(true, "got seeking event"); 88 // Load [15+0, 15+1.601666) 89 p = once(el, "seeked"); 90 await fetchAndLoad(videosb, "bipbop/bipbop_video", range(1, 3), ".m4s"); 91 await p; 92 ok(true, "got seeked event"); 93 // Load [15+1.60166, 15+3.203333] 94 await fetchAndLoad(videosb, "bipbop/bipbop_video", range(3, 5), ".m4s"); 95 ok(true, "data loaded"); 96 // Playback we play for a little while then stall. 97 p = Promise.all([once(el, "playing"), once(el, "waiting")]); 98 el.play(); 99 await p; 100 ok(true, "got playing and waiting event"); 101 // Playback has stalled, readyState is back to HAVE_CURRENT_DATA. 102 is(el.readyState, el.HAVE_CURRENT_DATA, "readyState is HAVE_CURRENT_DATA"); 103 // Load [15+3.203333, 15+4.805) 104 // Our final buffered range will now be [0, 3.203333)[6, 9.203333)[15, 19.805) 105 p = Promise.all([once(el, "playing"), once(el, "canplay"), once(el, "canplaythrough")]); 106 await fetchAndLoad(videosb, "bipbop/bipbop_video", range(5, 7), ".m4s"); 107 await p; 108 ok(true, "got playing, canplay and canplaythrough event"); 109 SimpleTest.finish(); 110 }); 111 112 </script> 113 </pre> 114 </body> 115 </html>