Blenderpoint web video reader

To load the demo, click here.

Shortcuts

Arrow keys or left/right click on the canvas: next/previous stop (continous: double press if you do not want to play the full animation)
p: play/pause without stopping
n: go to the next frame
b: go to the previous frame (b = backward)
Home: go to first frame
End: go to last frame
F: enable full screen (quit with Esc)
f: go to a specific frame
g: go to a specific page
l: print information on the current frame in the console (F12 > console)
L: print generic information, notably on the list of stops, in the console (F12 > console)
a: add current frame to stops, and print the list of stops in the console (F12 > console)
r: remove current frame from stops
S: manually specify the list of stops

Documentation

This plays a video and stops at specific fixed frames called "stops" (WARNING: this is still not considered as stable due to the lack of tests, polishments, and the fact that it is not tested in Firefox. See TODO for more details.). To specify the stops (that you can obtain in console (F12 > console) by using the L key, cf documentation above), you can either press the S/a/r keys (cf. documentation above), or add in the comments of the video something like this (In VLC you can see and edit the comments of a video via Tools > Media information or Ctrl-I):


      BLENDERPOINTSTART
{"stops": [1,5,10]}
BLENDERPOINTSTOP

This format allows more advanced options, for instance to provide information on the original position of a frame in a clip that will be documented later.

You can also load videos from an url: just add the (url encoded) url into the url of this page:

https://leo-colisson.github.io/blenderpoint-web/?video=https://leo-colisson.github.io/blenderpoint-web/Demo_24fps.mp4

You can also specify the stops in the url directly if your video does not have it encoded:


        https://leo-colisson.github.io/blenderpoint-web/?video=https://leo-colisson.github.io/blenderpoint-web/Demo_24fps.mp4&stops=10,20,50

You can also override the stops of a any file that you load locally (even if stops are contained in the video file), but for that you need to use:


        https://leo-colisson.github.io/blenderpoint-web/forceStops=10,20,50

Acknowledgment

I'd like to thank sandersdan that provided very useful advices to make this more efficient.

License and bug report

This project is open source and licensed under the GNU GPL license. Feel free to submit bug reports in the corresponding section of the github page.

Compatibility

This tool is compatible (in theory) with any browser supporting WebCodec API (click to see the list), i.e. Chrome >= 94, Firefox >= 130, Firefox android >= 138, and Safari >= 26-Technology-Preview. However, this API being relatively new (as of 2025), you may experience bugs in early versions of the browsers (for instance Firefox used to jitter on older versions, now it is seems to be fixed in 139.0.4). Note also that you should use video codecs that browser can decode. I used mp4 with h264 + yuv420p with great success, but note that Firefox is not compatible with videos encoded in yuvj444p so make sure to turn them into yuv420p with something like ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4). If you still experience a bug in the most recent version of the browser, please report it here.

TODO and known bugs

Some frames are not closed before garbage collection, no idea why. In practice it seems to be no problem, but check memory consumption.
Print a small icon when playing
Make nicer GUI
Document the JSON format
For now the video cannot play sound. Try to get inspiration from the video/audio example of w3m to add support for sound.
Test on different OS to ensure it works (no reasons to see why it would fail, but still)
Make it work for non Chrome-based browser (webcodec needed to decode for now, apparently Firefox will implement it soonish, but in the meantime we can maybe use a firefox-specific decoder). Note that ffmpeg would certainly be too slow for decoding in real time.
Print more informations with L, like the stops separated per video chunks.
For now we hardcode the options to configure the number of frames to cache etc (tradeoff between speed and memory). It might be nicer to allow the user to choose them, or, additionally, to automatically detect the available cache size depending on the remaining space.
Automatically cache all stops to quickly navigate
Prints a table of all pages and/or content to quickly jump anywhere in the document
Create two modes, one where backward is not continuous, and one where it is continuous (not super efficient since for now there are some small pauses due to how videos are encoded, harder to quickly go backward to find a specific frame, and this can be confusing since we never know the direction, but in some specific cases people might still want it).
Prints a nice message while loading the video
Provides a way to start the show before fetching the whole video (would require the MOOC box of the video to be placed before the main content to get the JSON file)
Allow more advanced content like js animations etc to write interactive content (but still fallback to video if not displayed in a browser)