Tint, a Video.js skin that wears the colours of the film it plays
More films
by Blender Studio, . CC BY 4.0. Streamed by Mux.
How it works
- One storyboard. Mux makes one for every video, for timeline previews: frames from across the film.
- One fingerprint. Tint squeezes each frame into a stripe. In order, the stripes tell the film's colour story.
- One player. The fingerprint becomes the timeline, and the colour under the playhead tints the controls.
Nothing samples the playing video, so the colour costs nothing per frame. After Brendan Dawes's Cinema Redux, Frederic Brodbeck's Cinemetrics, and a century of slit-scan photography.
Made for everyone.
Keyboard, screen readers, reduced motion, more contrast, right-to-left and any size, from a phone to a cinema screen. Try each one on the real player.
Use it on your site.
Copy the skin's src folder into your project and wrap any video that has a thumbnails track. Apache 2.0.
<video-player content-title="Sprite Fright">
<!-- the markup from src/video/skin.html -->
<mux-video src="https://stream.mux.com/PLAYBACK_ID.m3u8"
playsinline crossorigin="anonymous"></mux-video>
</video-player>
<script type="module">
import '@videojs/html/video/player';
import '@videojs/html/media/mux-video';
import './src/video/skin.ts';
</script>