Skip to content

Latest commit

 

History

History
48 lines (35 loc) · 2.73 KB

README.md

File metadata and controls

48 lines (35 loc) · 2.73 KB
Raw

dvdlikenav.js

Navigate a movie like it has a DVD menu: add buttons and point them to regions and jump to scenes on key press.

Runs in a fullscreen browser. I used this for a presentation (with touch input) and for a simple game (with a custom keyboard).

Requirements

  • A video-capable browser. Only tested in Chrome/-ium.
  • A video that can be played with this browser (like h264 in a mp4 container).
  • Everything (all scenes, a menu) has to be in one long movie.
  • For make-example-movie.sh: imagemagick, ffmpeg, bash.

Usage

  • Create a cfg.js. See cfg-example.js.
    • It is basically an array of scenes
    • Each scene has a start/end-marker (in seconds).
    • Each scene can have an array of buttons
    • Each button has coordinates (expressed in fractions [0..1.0]) and a target scene
    • A 'menu' scene should probably idleAtEnd.
    • Note: all scenes can have buttons, like a 'back' button that targets the start scene.
    • Each scene can have a time window for key presses to jump to a scene, either immediately or after the current scene is finished. Use this for navigation and "quick time events".
  • Copy all files to your device and open via file://. You can also run this over a network - it worked surprisingly well over WiFi with a 1GB+ movie.
  • Append #debug to the URL to enable debug mode which visualizes borders, buttons and shows timecode and state.

Example usage

sh make-example-movie.sh # should create example.mp4
cp cfg-example.js cfg.js
xdg-open ./index.html
  • Click one of the numbers to jump into the scene.
  • Scene "100" (s100) has a keyWindow. Hit (lowercase) h to jump to home (start), n to the next scene (s200). In "200" (s200) the jump is delayed and occurs at the end of the scene.

"Autostart"

  • Run this script / create a link in your OS's Autostart app / config / folder: chromium --kiosk /path/to/dvdlikenav/index.html#isfull
  • Windows 10 notes-to-self: Win+R, shell:startup to open Autostart (it is very well hidden). Create a new link, target should look like "C:\Program F…\chrome.exe" --kiosk "C:\path…\dvdlikenav\index.html#isfull".
  • Since it's hard to reliably detect fullscreen or kiosk mode in a browser, the hash #isfull serves as an explicit flag.

Video considerations

  • You might notice jumps/lag/delays. I tried a version with two overlaying <video>s that would pre-jump and blit, but in the end a sufficiently small GOP (≤5) did the trick. Strategically placed keyframes/scenecuts might do the trick even better.
  • Also consider tune=fastdecode etc.
  • Video aspect ratio has to match the display/window size, otherwise the buttons won't fit. Check with #debug.