🎬 Caramel Webplayer: Kendi Video Oynatıcımı Açık Kaynak Yaptım

#📝 Özet

Sitemdeki rehber videosunu YouTube'dan değil, kendi oynatıcımdan oynatmak istedim. Ortaya Caramel Webplayer çıktı: Video.js 10 üzerine kurulu, sitemin renkleriyle temalanmış, intro ve sponsor atlama, bölüm listesi ve kaldığı yerden devam eden oynatma listesi olan bir web video oynatıcısı. Şimdi MIT lisansıyla açık kaynak ve npm'de. Bu yazıda neden yaptığımı, neler yapabildiğini ve kendi sitenize nasıl ekleyebileceğinizi anlatıyorum.

#🔗 Gerekli Linkler

#🤔 Neden kendi oynatıcım?

Ana sayfamdaki OpenWrt rehberi videosu YouTube gömmesiyle duruyordu. Çalışıyordu ama sitenin bir parçası gibi değil, ödünç alınmış bir pencere gibi görünüyordu: tam ekranda YouTube arayüzü, sitemle alakasız renkler, üstüne bir de YouTube'a giden istekler. Videonun orijinali zaten bendeydi, o yüzden kendim barındırıp kendi oynatıcımla oynatmaya karar verdim.

Sıfırdan bir oynatıcı yazmak yerine Video.js 10 üzerine kurdum. v10, oynatıcıyı custom element'lere bölüyor; bu sayede üstüne kendi skin'imi, ikonlarımı ve ek bileşenlerimi giydirebildim. React tarafı ince bir sarmalayıcı, Next.js App Router'da SSR'ı bozmadan çalışıyor.

#✨ Neler yapabiliyor?

• Karamel tema: açık (latte) ve koyu (bitter) iki palet. Bütün renkler --caramel-* CSS değişkenleri; birkaç ana renk değiştirdiğinizde hover ve türev renkler kendiliğinden uyuyor. Hazır preset'ler de var (ör. Catppuccin Mocha).
• Morf eden ikonlar: Lucide ikonları, oynat/durdur gibi geçişlerde birbirine dönüşüyor.
• Atlama düğmeleri: intro, özet, kapanış ve sponsor bölümleri zaman çizgisinde renkli bantlarla görünüyor. İsterseniz bir türü otomatik atlatabiliyorsunuz (demoda özet otomatik atlanıyor).
• Bölüm listesi: videonun dışında, sayfada duran tıklanabilir bir bölüm paneli.
• Oynatma listesi: kapak, başlık, altyazı ve bölümleri her videoya göre değiştiriyor, kaldığınız yeri hatırlıyor, bitince sıradakine geçiyor.
• Zaman çizgisi önizlemesi: fareyi çizgide gezdirince küçük kareler ve o anki bölümün adı çıkıyor.
• TR ve EN arayüz, altyazı desteği, HLS ve MP4.

Hepsini tek tek anlatmak yerine demoyu açmanızı öneririm; oynatıp intro'yu atlamak iki saniye sürüyor.

#🚀 Kendi sitenize ekleme

Tek paket her şeyi getiriyor:

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

React (Next.js App Router dahil):

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

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

Düz HTML, modüler kurulum (yalnız ihtiyacınız olan paketler) ve tema değiştirme örnekleri README'de. Renkleri değiştirirken kontrast tablosunu da oraya koydum.

#🛠️ Videoyu hazırlamak

Oynatıcı videoyu yalnızca oynatıyor, bir yere yüklemiyor. Hazırlık için repoda iki küçük araç var:

• encode-hls: bir videoyu, altyazılarını ve bölüm bilgisini (basit bir meta.yaml) alıp yayına hazır HLS, kapak, önizleme kareleri ve altyazı dosyalarına çeviriyor. Ben çıktıyı kendi depolama alanıma elle yüklüyorum.
• gen-thumbs: sadece zaman çizgisi önizleme karelerini (sprite + WebVTT) üretiyor.

İkisi de ffmpeg kullanıyor.

#🤖 Nasıl geliştirdim?

Bu projeyi AI destekli geliştirdim. Mimariyi ve kararları ben verdim, kodun büyük kısmını AI ajanlarıyla fazlar hâlinde yazdırdım, her fazın sonunda demoyu kendim açıp test ettim ve hataları geri bildirdim. Açık kaynak yapmadan önce lisans denetimi (Video.js skin'i Apache 2.0, Lucide ISC, Morphicons MIT), testler, CI ve npm'e provenance'lı yayın akışını da kurdum. Yani "AI yazdı, yayınladım" değil; ama AI olmadan bu sürede bitmezdi, onu da saklamayayım.

#🎬 Demo videosu hakkında

Canlı demoda Blender Foundation'ın açık filmi Tears of Steel'den üç kısa klip var ((CC) Blender Foundation, CC BY 3.0). Türkçe altyazıları demo için ben çevirdim.

#💬 Kapanış

Önümüzdeki birkaç ay indirmeleri ve geri bildirimleri izleyeceğim. Bir hata bulursanız ya da bir özellik isterseniz GitHub'da issue açabilirsiniz; katkıya da açığım. Kendi sitenizde kullanırsanız haber verin, merak ediyorum.