frame_order_mp4.html (1341B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <head> 4 </head> 5 <body> 6 <video id="v" style="position:absolute; left:0; top:0"></video> 7 <canvas id="canvas" style="position:absolute; left:0; top:0"></video> 8 <script type="text/javascript"> 9 /** 10 * Do seek multiple times and check the video frame on 0.3s. 11 */ 12 async function testFrameOrderAfterSeeking() { 13 const video = document.getElementById("v"); 14 video.src = "frame_order.mp4"; 15 await new Promise(r => video.oncanplay = r); 16 // The issue won't happen on the first seek, because the decoder hasn't been 17 // created yet. 18 video.currentTime = 0.1; 19 await new Promise(r => video.onseeked = r); 20 video.currentTime = 0.3; 21 await new Promise(r => video.onseeked = r); 22 // Since our media pipeline sends the frame to imageBridge, then fires 23 // a seeked event, the target frame may not be shown on the screen. 24 // So using canvas to access the target frame in the imageContainer in 25 // videoElement. 26 const canvas = document.getElementById("canvas"); 27 canvas.width = video.videoWidth; 28 canvas.height = video.videoHeight; 29 const ctx = canvas.getContext("2d"); 30 ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); 31 document.documentElement.removeAttribute('class'); 32 }; 33 34 window.addEventListener("MozReftestInvalidate", testFrameOrderAfterSeeking); 35 </script> 36 </body> 37 </html>