Skip to content
Experiments with video scrubbing on the web
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
common
frame-extract-tool
vendor
video-current-time
video-play-unpack-frames-canvas
video-seek-media-stream-image-capture
video-seek-unpack-frames-canvas
video-server-frames
videos
.gitignore
LICENSE
README.md
index.html
netlify.toml
package.json

README.md

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.

You can’t perform that action at this time.