1 <html> 2 <head> 3 <title>Video playback</title> 4 </head> 5 <body> 6 <video id='video1' muted></video> 7 </body> 8 <script type='text/javascript'> 9 const video = document.getElementById('video1'); 10 11 function load_data_url(url) { 12 video.src = url; 13 video.onloadedmetadata = () => { 14 // Enlarge |video| but keep it inside the viewport; |height| also has to 15 // account for the Shelf (taskbar) at the bottom. |video| will be rendered 16 // inside that area respecting its aspect ratio. 17 video.width = Math.min(video.videoWidth, window.innerWidth * 0.9); 18 video.height = Math.min(video.videoHeight, window.innerHeight * 0.9); 19 video.loop = true; 20 video.play(); 21 }; 22 23 video.onplay = () => { 24 setInterval(draw_pass, 100); 25 } 26 27 video.load(); 28 } 29 30 var draw_passes_count = 0; 31 function draw_pass() { 32 // <video> doesn't have a way to count the amount of played back frames, so 33 // we'll just count time intervals then. 34 draw_passes_count++; 35 } 36 37 function get_draw_passes_count() { 38 return draw_passes_count; 39 } 40 41 </script> 42 </html> 43
