🎬 Caramel Webplayer: I Open-Sourced My Own Video Player

#📝 Summary

I wanted the guide video on my site to play from my own player instead of YouTube. The result is Caramel Webplayer: a web video player built on Video.js 10, themed with my site's colors, with skip intro and sponsor buttons, a chapter list and a playlist that remembers where you left off. It is now open source under the MIT license and on npm. In this post I explain why I built it, what it can do and how you can add it to your own site.

#🔗 Useful Links

#🤔 Why my own player?

The OpenWrt guide video on my home page was a YouTube embed. It worked, but it never felt like part of the site, more like a borrowed window: the YouTube interface in fullscreen, colors that had nothing to do with my site, and requests going out to YouTube on top of that. I already had the original video, so I decided to host it myself and play it with my own player.

Instead of writing a player from scratch I built on Video.js 10. v10 splits the player into custom elements, which let me dress it in my own skin, icons and extra components. The React side is a thin wrapper and works in the Next.js App Router without breaking SSR.

#✨ What can it do?

• Caramel theme: a light (latte) and a dark (bitter) palette. Every color is a --caramel-* CSS variable; change a few main colors and the hover and derived colors follow. There are ready-made presets too (e.g. Catppuccin Mocha).
• Morphing icons: Lucide icons that morph into each other on transitions like play/pause.
• Skip buttons: intro, recap, outro and sponsor sections show up as colored bands on the timeline. You can auto-skip a type if you like (the demo auto-skips the recap).
• Chapter list: a clickable chapter panel that lives on the page, outside the video.
• Playlist: swaps the poster, title, subtitles and chapters for every video, remembers where you stopped and moves on to the next one when a video ends.
• Timeline preview: hover over the timeline to see thumbnails and the name of the chapter at that point.
• Turkish and English UI, subtitles, HLS and MP4.

Rather than going through all of it, I suggest opening the demo; pressing play and skipping the intro takes two seconds.

#🚀 Adding it to your site

One package brings everything:

npm install @esershnr/caramel-webplayer @videojs/html

React (Next.js App Router included):

'use client';
import '@esershnr/caramel-webplayer/webplayer.css';
import { CaramelVideoSkin, SkipSegments } from '@esershnr/caramel-webplayer/react';

<CaramelVideoSkin id="player" lang="en" extras={<SkipSegments segments={[{ start: 0, end: 30, type: 'intro' }]} />}>
  <video src="/video.mp4" playsInline />
</CaramelVideoSkin>

Plain HTML, the modular install (only the packages you need) and theming examples are in the README. I also put a contrast table there for when you change the colors.

#🛠️ Preparing the video

The player only plays the video, it doesn't upload it anywhere. The repo has two small tools for the preparation:

• encode-hls: takes a video, its subtitles and chapter info (a simple meta.yaml) and turns them into publish-ready HLS, a poster, preview thumbnails and subtitle files. I upload the output to my own storage by hand.
• gen-thumbs: only generates the timeline preview thumbnails (sprite + WebVTT).

Both use ffmpeg.

#🤖 How I built it

I built this project with AI assistance. I made the architecture and the decisions, had AI agents write most of the code in phases, opened the demo myself at the end of every phase to test it and reported the bugs back. Before open-sourcing it I also set up a license audit (the Video.js skin is Apache 2.0, Lucide ISC, Morphicons MIT), tests, CI and an npm release flow with provenance. So it's not "AI wrote it, I shipped it"; but I won't hide that it wouldn't have been done this fast without AI.

#🎬 About the demo video

The live demo uses three short clips from Tears of Steel, the open movie by the Blender Foundation ((CC) Blender Foundation, CC BY 3.0). I translated the Turkish subtitles for the demo myself.

#💬 Wrapping up

I'll be watching downloads and feedback over the next few months. If you find a bug or want a feature, you can open an issue on GitHub; contributions are welcome too. If you use it on your own site, let me know, I'm curious.