test_webvtt_seeking.html (3436B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>WebVTT : cue should be displayed properly after seeking</title> 5 <script src="/tests/SimpleTest/SimpleTest.js"></script> 6 <script src="manifest.js"></script> 7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 8 </head> 9 <body> 10 <script class="testbody" type="text/javascript"> 11 /** 12 * This test is used to ensure that the cue should be showed or hid correctly 13 * after seeking. In this test, we have two cues which are not overlapped, so 14 * there should only have one cue showing at a time. 15 */ 16 var CUES_INFO = [ 17 { id: 0, startTime: 1, endTime: 3, text: "This is cue 0."}, 18 { id: 1, startTime: 4, endTime: 6, text: "This is cue 1."}, 19 ]; 20 21 async function startTest() { 22 const video = createVideo(); 23 const cues = createCues(video); 24 await startVideo(video); 25 26 await seekVideo(video, cues[0].startTime); 27 await waitUntilCueIsShowing(cues[0]); 28 checkActiveCueAndInactiveCue(cues[0], cues[1]); 29 30 await seekVideo(video, cues[1].startTime); 31 await waitUntilCueIsShowing(cues[1]); 32 checkActiveCueAndInactiveCue(cues[1], cues[0]); 33 34 // seek forward again 35 await seekVideo(video, cues[0].startTime); 36 await waitUntilCueIsShowing(cues[0]); 37 checkActiveCueAndInactiveCue(cues[0], cues[1]); 38 39 removeNodeAndSource(video); 40 SimpleTest.finish(); 41 } 42 43 SimpleTest.waitForExplicitFinish(); 44 onload = startTest; 45 /** 46 * The following are test helper functions. 47 */ 48 function checkActiveCueAndInactiveCue(activeCue, inactiveCue) { 49 ok(activeCue.getActive, 50 `cue ${activeCue.id} [${activeCue.startTime}:${activeCue.endTime}] is active`); 51 ok(!inactiveCue.getActive, 52 `cue ${inactiveCue.id} [${inactiveCue.startTime}:${inactiveCue.endTime}] is inactive`); 53 } 54 55 function createVideo() { 56 let video = document.createElement("video"); 57 video.src = "gizmo.mp4"; 58 video.controls = true; 59 document.body.appendChild(video); 60 return video; 61 } 62 63 function createCues(video) { 64 let track = video.addTextTrack("subtitles"); 65 track.mode = "showing"; 66 let cue0 = new VTTCue(CUES_INFO[0].startTime, CUES_INFO[0].endTime, 67 CUES_INFO[0].text); 68 cue0.id = CUES_INFO[0].id; 69 let cue1 = new VTTCue(CUES_INFO[1].startTime, CUES_INFO[1].endTime, 70 CUES_INFO[1].text); 71 cue1.id = CUES_INFO[1].id; 72 track.addCue(cue0); 73 track.addCue(cue1); 74 // Convert them to chrome objects in order to use chrome privilege APIs. 75 cue0 = SpecialPowers.wrap(cue0); 76 cue1 = SpecialPowers.wrap(cue1); 77 return [cue0, cue1]; 78 } 79 80 async function startVideo(video) { 81 info(`start play video`); 82 const played = video && await video.play().then(() => true, () => false); 83 ok(played, "video has started playing"); 84 } 85 86 async function waitUntilCueIsShowing(cue) { 87 info(`wait until cue ${cue.id} shows`); 88 // cue has not been showing yet. 89 if (!cue.getActive) { 90 await once(cue, "enter"); 91 } 92 info(`cue ${cue.id} is showing`); 93 } 94 95 async function seekVideo(video, time) { 96 ok(isInRange(time, CUES_INFO[0].startTime, CUES_INFO[0].endTime) || 97 isInRange(time, CUES_INFO[1].startTime, CUES_INFO[1].endTime), 98 `seek target time ${time} is within the correct range`) 99 info(`seek video to ${time}`); 100 video.currentTime = time; 101 await once(video, "seeked"); 102 info(`seek succeeded, current time=${video.currentTime}`); 103 } 104 105 function isInRange(value, lowerBound, higherBound) { 106 return lowerBound <= value && value <= higherBound; 107 } 108 </script> 109 </body> 110 </html>