locksy/experiment-video-scrub

Experiments with video scrubbing on the web

experiment-video-scrub

A collection of proof-of-concepts and prototypes of various mechanisms to enable video scrubbing based experiences on the web with input signals such as the scrolling of the page.

Approaches & Demos

Read about approaches, observations and learnings in detail on my blog post.

#1: video-current-time: (blog) (demo)

#2: video-play-unpack-frames-canvas (blog) (demo)

#3: video-seek-unpack-frames-canvas (blog) (demo)

#4: video-seek-media-stream-image-capture (blog) (demo)

#5: video-server-frames (blog) (demo)

#6: video-wasm-ffmpeg-extract (blog)

Bonus

Try out the bonus Video Frame Extract Tool (experimental).

Dev Setup

Local

This is purely a static website, so it doesn't need a server. For ease of development though, I have been simply using VSCode Live Server for local development.

Deploy

The github repository deploys to Netlify from the master branch.

Video Source Attribution

Sample video is picked up from public test video sources. All copyrights belong to the original owners.