Skip to content

Caramel Webplayer

2026Web Projects

Caramel Webplayer is an open source web video player I built on Video.js 10 and dressed in my site's caramel theme. I made it to play the guide video on my home page from my own player instead of a YouTube embed, then published it on npm under the MIT license.


Highlights:
  • Skip intro, recap, outro and sponsor; colored bands on the timeline, chosen types are skipped automatically
  • A chapter list on the page and timeline preview thumbnails
  • A playlist that resumes where you left off and moves on when a video ends
  • Light and dark theme, every color a CSS variable; morphing Lucide icons
  • Built on custom elements; the React wrappers work in the Next.js App Router without breaking SSR
  • ffmpeg-based tools for preparing videos: HLS, subtitles, chapters and preview thumbnails

The demo clips are from Tears of Steel, the Blender Foundation's open movie ((CC) Blender Foundation, CC BY 3.0).