Last active
March 20, 2023 23:35
-
-
Save Hermann-SW/7e2ea089280f23ec8710 to your computer and use it in GitHub Desktop.
HTML5 120fps video player with single frame back+forward (Chrome/Firefox/Opera)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- | |
| Based on this posting: | |
| http://stackoverflow.com/questions/20336955/how-to-step-one-frame-forward-and-one-frame-backward-in-video-playback/20339938#20339938 | |
| v0.1: initial | |
| v0.2: highlight key commands as buttons, fps snap-in time | |
| v0.3: key commands -> button commands | |
| v0.4: allow for "http[s]://....?t=7.07", pause video on fwd/bck/"|<" | |
| --> | |
| <html> | |
| <head> | |
| <title>120fps single frame video player</title> | |
| <script type="text/javascript"> | |
| var video, button, fps = 120, frameTime = 1 / fps; | |
| function back() { | |
| video.pause(); | |
| video.currentTime = Math.round(video.currentTime *fps) / fps; | |
| if (video.currentTime >= frameTime) { | |
| video.currentTime -= frameTime; | |
| } | |
| } | |
| function forward() { | |
| video.pause(); | |
| video.currentTime = Math.round(video.currentTime *fps) / fps; | |
| if (video.currentTime+frameTime <= video.duration) { | |
| video.currentTime += frameTime; | |
| } | |
| } | |
| function doit() { | |
| video = document.getElementById('video'); | |
| button = document.getElementById('button'); | |
| video.onloadeddata = function() { | |
| if (window.location.search.split("=")[1]) { | |
| tgt = Math.round(window.location.search.split("=")[1] *fps) / fps; | |
| if ((tgt >= 0.0) && (tgt <= video.duration)) { | |
| video.currentTime = tgt; | |
| } | |
| } | |
| }; | |
| // workaround to trigger "onloadeddata" event in all cases | |
| video.load(); | |
| setInterval(function(){ button.value = video.currentTime; }, 100); | |
| } | |
| </script> | |
| </head> | |
| <body onload="doit()"> | |
| <h3>120fps single frame video player; v0.4 </h3> | |
| Works well with Chrome browser (Linux/Windows), a bit slow with Firefox and Opera (Windows), formatted <a href="https://gist.github.com/Hermann-SW/7e2ea089280f23ec8710">source</a><br/> | |
| <input type="button" value="|<" onclick="video.pause(); video.currentTime = 0"> | |
| <input type="button" value="<" onclick="back()"> | |
| <input type="button" value=">" onclick="forward()"> | |
| <input type="button" value=">|" onclick="video.currentTime = Math.round(video.duration * fps) / fps"> | |
| t=<input type="button" id="button" size="9" readonly><br/> | |
| <video id="video" controls=""> | |
| <source src="https://stamm-wilbrandt.de/videos/20151015_072501.mp4"> | |
| </video> | |
| </body> | |
| </html> |
I searched the web for a single frame back+forward browser video player and landed here.
Then I realized that this is my own gist updated last 7 years ago I was looking at ;-)
Works with 1152x192@304fps video as well (chain reaction of ten(!) classical mouse traps), captured with new Raspberry Pi Global Shutter Camera (GS):
https://stamm-wilbrandt.de/en/forum/GS/304fps_mt.html?t=0.62171
And with 688x136@402fps video as well (chain reaction of three classical mouse traps), captured with Raspberry GS camera as well:
https://stamm-wilbrandt.de/en/forum/GS/402fps_mt.html?t=0.156715
And 1440x480@100fps video of analog clock:
https://stamm-wilbrandt.de/en/forum/GS/100fps_clk.html?t=20.2
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://stamm-wilbrandt.de/videos/120fps.9.html?t=14.233333
9 [57MB] Arduebot ramping up to circular full speed (that is when blue LED is turned on) and then moves around instead of keeping stationary. 1.25s after the URL selected frame GND cable got disconnected (unplanned) powering off Arduebot -- this was lucky because the unplanned and quick movement could have destroyed Arduebot otherwise.