-
-
Save Hermann-SW/7e2ea089280f23ec8710 to your computer and use it in GitHub Desktop.
| <!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> |
Here are two other 120fps videos as single-frame-player link:
https://stamm-wilbrandt.de/videos/120fps.html?t=0.25
https://stamm-wilbrandt.de/videos/120fps.3.html?t=7.49
Two new 120fps videos as single-frame-player link:
https://stamm-wilbrandt.de/videos/120fps.4.html?t=2.941666
https://stamm-wilbrandt.de/videos/120fps.5.html?t=9.691666
Table of content:
2 [56MB] Motor Test station, power loss with 10.7m/s (38.6km/h)
_ [9MB] Motor test station, end of manual acceleration
3 [26MB] ILI9341 LCD display refresh demo
4 [13MB] Neckar valley, Audi 4.5m(?) long => 4.5 / (2.941666-2.6) * 3.6=47.4km/h
5 [32MB] 2wd robot, π*14.5/(10.391666-9.6916666)=65cm/s circular speed
https://stamm-wilbrandt.de/videos/120fps.6.html?t=26.658333
6 [128MB] 2wd robot, bought for slow speed, but not that slow, at least when powered with 12.27V:
362g; π*0.145/((27.283332-26.658333)/2)=1.45m/s (5.2km/h)
Not comparable with the 13.16m/s (47.37km/h) in MTS (Motor Test Station), but same code!
https://www.youtube.com/watch?v=U1zrw5bQtKI
https://stamm-wilbrandt.de/videos/120fps.7.html?t=4.191665
7 [23MB] 2wd robot, speed determined by short linear movement (floor tile+joint = 31.5cm).
0.315/(4.441666-4.191665)=1.26m/s (4.5km/h)
https://stamm-wilbrandt.de/videos/120fps.8.html?t=7.508333
8 [32MB] 2wd Arduebot, starts 3 seconds after reset (1st blue LED on), goes from PWM=80 to PWM=99 in 0.4s, then 2nd blue LED on, then delay(1000) followed by both blue LEDs off and motor stop.
Arduebot does 2.6 tiles (50cmx50cm) between 7.058333s and 8.058333s, therefore at least 1.3m/s (not sure whether still accelerating). Left and right motor get identical PWM settings, but Arduebot moves not straight.
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.
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
You can run w/o download via this link:
https://stamm-wilbrandt.de/videos/120fps.2.html?t=15.58