remote-video-control-seek-manual.html (2461B)
1 <!DOCTYPE html> 2 <html> 3 <link rel="stylesheet" href="styles.css" /> 4 <title>Test that seek() on the local video is reflected on the remote device</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/common/media.js"></script> 8 <script> 9 setup({ explicit_timeout: true }); 10 </script> 11 <body> 12 <div id="pick-device"> 13 <p> 14 Click the button below to prompt for a remote playback device and select 15 one! 16 </p> 17 <p> 18 Wait a few seconds for the video to initialize, play and seek. 19 </p> 20 <p> 21 <button id="prompt-button">Pick device</button> 22 </p> 23 </div> 24 <video src="/media/green-at-15.mp4" id="video"></video> 25 <div id="evaluate" style="display: none"> 26 <p> 27 Did the playback on the remote device pause and show the following 28 timestamp? (can vary by some frames) 29 </p> 30 <p id="timestamp" style="font-weight: bold"></p> 31 <p> 32 <button id="yes">Yes</button> 33 </p> 34 <p> 35 <button id="no">No</button> 36 </p> 37 </div> 38 </body> 39 <script> 40 let v = document.getElementById("video"); 41 42 async_test(t => { 43 let button = document.getElementById("prompt-button"); 44 button.onclick = t.step_func(() => { 45 promise_test(() => { 46 return v.remote.prompt().then(() => { 47 v.play(); 48 }); 49 }, "Prompt resolves"); 50 }); 51 52 let timestampLabel = document.getElementById("timestamp"); 53 v.ontimeupdate = () => { 54 let seconds = Math.floor(v.currentTime) + ""; 55 let frames = Math.ceil((v.currentTime - seconds) * 30) + ""; 56 timestampLabel.innerText = 57 seconds.padStart(2, "0") + ":" + frames.padStart(2, "0"); 58 if (v.currentTime >= 2 && v.currentTime < 18) { 59 v.currentTime = 18; 60 } 61 if (v.currentTime >= 20) { 62 v.pause(); 63 document.getElementById("evaluate").style.display = "block"; 64 } 65 }; 66 67 let evaluate = success => 68 assert_true(success, "Video paused and has correct play position."); 69 70 document.getElementById("yes").onclick = t.step_func_done(() => 71 evaluate(true) 72 ); 73 document.getElementById("no").onclick = t.step_func_done(() => 74 evaluate(false) 75 ); 76 }, "Test that seek() on the local video is reflected on the remote device."); 77 </script> 78 </html>