| <html> |
| <head> |
| <title>Video playback</title> |
| </head> |
| <body> |
| <video id='video1' muted></video> |
| </body> |
| <script type='text/javascript'> |
| const video = document.getElementById('video1'); |
| |
| function load_data_url(url) { |
| video.src = url; |
| video.onloadedmetadata = () => { |
| // Enlarge |video| but keep it inside the viewport; |height| also has to |
| // account for the Shelf (taskbar) at the bottom. |video| will be rendered |
| // inside that area respecting its aspect ratio. |
| video.width = Math.min(video.videoWidth, window.innerWidth * 0.9); |
| video.height = Math.min(video.videoHeight, window.innerHeight * 0.9); |
| video.loop = true; |
| video.play(); |
| }; |
| |
| video.onplay = () => { |
| setInterval(draw_pass, 100); |
| } |
| |
| video.load(); |
| } |
| |
| var draw_passes_count = 0; |
| function draw_pass() { |
| // <video> doesn't have a way to count the amount of played back frames, so |
| // we'll just count time intervals then. |
| draw_passes_count++; |
| } |
| |
| function get_draw_passes_count() { |
| return draw_passes_count; |
| } |
| |
| </script> |
| </html> |
