- 16 yıl sonra tamamen yeniden yazılan Video.js v10, paket boyutunu %88 azaltıp modern geliştirme ortamlarına uygun bir yapıyla yeniden doğdu
- React·TypeScript·Tailwind için birinci sınıf destek sunuyor; estetik varsayılan bir arayüz ve yapay zeka dostu dokümantasyon yapısı sağlıyor
- Yeni Streaming Processor Framework(SPF) ile yalnızca gereken özelliklerin birleştirilebildiği modüler bir streaming motoru oluşturuluyor; HLS.js'e kıyasla %12 seviyesinde hafiflik sağlanıyor
- Kompozisyon tabanlı mimari ve React/Web Components skin sistemi ile arayüz ve özellikler serbestçe değiştirilebiliyor veya kaldırılabiliyor
- 2026'da resmi çıkış hedefleniyor; yapay zeka ile ortak geliştirme ve ölçeklenebilir preset ekosistemi üzerinden yeni nesil açık kaynak medya platformuna dönüşüyor
Video.js v10 beta genel bakış
- Video.js v10.0.0 beta, 16 yıl sonraki kapsamlı yeniden yazımın sonucu; yalnızca Video.js değil, Plyr, Vidstack, Media Chrome gibi çeşitli açık kaynak projelerin iş birliğiyle ortaya çıktı
- Toplam 75 bin GitHub yıldızı ve ayda milyarlarca oynatma ölçeğine sahip ekosistem bu sürece katıldı; yapı, modern geliştirme yöntemleri ve yapay zeka destekli geliştirme ortamı dikkate alınarak yeniden tasarlandı
- Başlıca hedefler paket boyutunu %88 küçültmek, React·TypeScript·Tailwind için birinci sınıf destek vermek, estetik varsayılan bir arayüz ve yapay zeka dostu dokümantasyon yapısı sunmak
Paket boyutu ve performans iyileştirmeleri
- Temel Video.js v10 oynatıcısında, v8'e kıyasla varsayılan paket boyutu %88 azaldı; ABR(Adaptive Bitrate) özelliği çıkarıldığında bile %66 küçülme sağlanıyor
- Örnek: v8 varsayılan 260.5kB(minified) → v10 HTML video oynatıcı 97.4kB(minified), React sürümü ise 62.0kB
- Yeni Streaming Processor Framework(SPF) sayesinde yalnızca gerekli özelliklerin birleştirilebildiği modüler bir streaming motoru kurulabiliyor
- Basit HLS kullanımında v10+SPF, v8+VHS'ye kıyasla dosya boyutunun %19'u seviyesinde
- SPF motorunun kendisi, HLS.js-light'ın %12 boyutunda (38.5kB minified) ve basit ABR işleme için optimize edilmiş durumda
- SPF, HLS.js, Shaka, dash.js gibi mevcut motorlarla tam uyumlu; karmaşık DRM veya reklam özellikleri gerekmiyorsa aşırı derecede hafif yapılandırmalar mümkün
Kompozisyon tabanlı mimari
- v10, State, UI, Media ayrımına dayanan bir bileşen yapısı kullanıyor; her unsur bağımsız olarak değiştirilebiliyor veya kaldırılabiliyor
createPlayer() fonksiyonu, features dizisini alarak yalnızca gereken özellikleri dahil ediyor- Örneğin ses özellikleri gerekmiyorsa
volume, mute kodu pakete hiç eklenmiyor
- Arayüzü kaldırmak için skin'i hiç yüklememek yeterli — gereksiz kod tamamen dışarıda bırakılabiliyor
- En küçük React örneği 5kB'den küçük (gzipped) boyutta çalışıyor ve yalnızca basit oynat/duraklat düğmesi içeriyor
Arayüz özelleştirme ve skin sistemi
- v10, React ve Web Components tabanlı bir skin sistemi sunuyor; Base UI, Radix gibi projelerden ilham alan unstyled UI primitives yapısını benimsiyor
- Her arayüz bileşeni tek bir HTML öğesi üretir ve bu da doğrudan kontrolü mümkün kılar
- v8'de CSS pseudo-element ile kontrol edilen timeline handle, v10'da gerçek bir DOM öğesi olarak sunuluyor; böylece stil vermek basitleşiyor
- Beta sürümünde iki skin bulunuyor
- Varsayılan skin: yarı saydam(frosted) estetik, yumuşak animasyonlar
- Minimal skin: özelleştirme için sade bir temel
- Skin'lerin hata diyaloğu tasarımı da birleştirildi; böylece görsel bütünlük iyileştirildi
Preset sistemi
- v10, kullanım amacına göre preset kavramını getiriyor; skin, özellik ve medya yapılandırmasını birleştiren hazır oynatıcı şablonları sunuyor
- Video preset: genel web videosu için
- Audio preset: podcast gibi yalnızca ses içeriği için
- Background video preset: arka plan videoları için, kontrol ve ses kaldırılmış
- Preset'ler hızlı bir başlangıç noktası sağlarken tüm bileşenlerin değiştirilebilmesine de olanak veriyor; tam esneklik korunuyor
- İleride eğitim, kısa form içerik ve creator platformları için ek preset'ler planlanıyor
Yapay zeka dostu tasarım
- v10, yapay zeka ajanlarının birlikte geliştirme yapabileceği bir yapı hedefliyor
- Soyutlanmamış bileşenler ve unstyled UI primitives sayesinde kodun anlaşılabilirliği artırılıyor
- Dokümantasyonda verimli gezinme için framework bazlı sürümleri de içeren llms.txt dosyası sunuluyor
- Tüm dokümanlar Markdown formatında sağlanıyor; böylece yapay zeka gereksiz HTML bağlamı olmadan doğrudan erişebiliyor
- Depodaki AI skill set ile gelecekte kullanıcı geliştirme desteği verilmesi planlanıyor
Beta kullanım notları
- API henüz kararlı değil; resmi sürüme kadar bazı arayüzlerde değişiklik olabilir
- Şu anda odak temel web sitesi oynatma işlevleri üzerinde; erişilebilirlik, altyazı ve çeşitli formatlar desteklenebilir olsa da ayar menüsü gibi özellikler henüz uygulanmadı
- GitHub issue'ları ve Discord geri bildirimleri aktif biçimde toplanıyor
- Mevcut sürüm kullanıcılarına, migration guide yayımlandıktan sonra geçiş yapmaları öneriliyor
Gelecek yol haritası
- 2026 ortasında resmi sürüm(GA) hedefleniyor
- Plyr, Vidstack, Media Chrome düzeyinde özellik eşitliğinin sağlanması planlanıyor
- Reklam desteği 2026'nın ikinci yarısı için planlanıyor
- Migration guide ve ek preset'ler sunulacak
1 yorum
Hacker News görüşleri
Merak eden olursa diye söyleyeyim, bu web sitesinin sözdizimi vurgulama renk teması “gruvbox”.
Benim çok hoşuma gitti, ama bunu bulmam epey zaman aldı.
gruvbox GitHub bağlantısı
Ben video.js'i hiç kullanmadım ama site ve tanıtım bana sanki zaten konuya aşina olanlara hitap ediyormuş gibi geldi.
Okurken aklıma gelen bir soru da şuydu: bunun HTML video etiketinden farkı ne? Sadece kontrol katmanı mı farklı?
Video etiketi bugünlerde oldukça iyi ama Video.js; tarayıcılar arası tutarlı stil, gelişmiş özellikler (analitik, DRM, 360 derece video vb.) ve çeşitli streaming formatları desteği (HLS, DASH vb.) gibi konularda ayrışıyor.
Sonuçta video etiketiyle de yapılabilir, ama o yola girince eninde sonunda Video.js benzeri bir şeyi kendiniz yapmış oluyorsunuz.
Kararlı bir oynatıcıya veya streaming özelliklerine ihtiyacınız varsa Video.js kullanmak daha iyi.
Bu arada ben Gürcistan ulusal TV yayın oynatıcısı yaptım; 2009 LG Smart TV'lerinden en yeni tarayıcılara kadar destekliyordu.
Bunun önemli olmasının nedeni dinamik bitrate ayarı. Caching de daha verimli oluyor.
WebVTT tarafında son zamanlarda durum değişti mi merak ediyorum.
Eskiden altyazı render'ını özelleştirmeye çalışmıştım ve aşırı zordu.
Bunun neden Web Component olarak dağıtılmadığını merak ediyorum.
Bana göre tam buna uygun bir kullanım senaryosu var — anlamlı bir nesnenin içine gömülü kontroller sonuçta.
Sonunda React için bir shim yazarak çözdük ama bu da başka sorunlar doğurdu.
VJS 10'da headless core + render katmanı yapısıyla bir orta yol bulduk.
Bu sayede hem React bileşenlerini hem de Web Component'leri destekliyor.
media-chrome GitHub bağlantısı
Shadow DOM bug'ları ve framework'ler arası uyumluluk meseleleri derken sonunda oynatıcının kendisinden çok ortam kurulumuna zaman harcıyorsunuz.
Kullanıcıların çoğu bunlarla ilgilenmiyor. Bence sadece JS kütüphanesi + temiz bir API çok daha iyi.
Ama React kullanma nedeni, tree-shaking sayesinde yalnızca gereken kodun dahil edilebilmesi.
Normal HTML tarafında bu tür optimizasyonlar hâlâ zor olduğu için, build pipeline bir bakıma Web Component üreticisi gibi çalışıyor.
Plyr kullanan ses oynatıcımı Video.js'e geçirmeyi denedim ama varsayılan ayarlarda bazı özellik farkları vardı.
1x altı oynatma hızı yok, mobilde ses seviyesi ayarı yapılamıyor, atlama butonları yok, renk özelleştirmesi zor, yeterli demo yok vb.
Şu anda Plyr vb. ile feature parity hedefleniyor ve GA için hedef zaman bu yılın ortaları.
Video barındırma konusunda çok bilgim yok ama HTML5 video player kullanmışlığım var.
Sunucu tarafında video chunk'larını doğrudan sunan endpoint'ler oluşturmak gerekiyor mu merak ediyorum.
ffmpeg ile 2 MB'lık parçalara bölersem bunları nereye koymak en iyisi olur? CDN mi, kendi sunucum mu?
Video.js'in en akıcı şekilde çalışması için en iyi kurulum ne olur?
Video.js ile iyi çalışıyor ve LG TV'lerde de etiket tabanlı oynatma mümkün.
Sunucu Range isteklerini destekliyorsa gerisini tarayıcı hallediyor.
Ben DO Spaces gibi object storage + CDN kombinasyonu kullanıyorum ve gayet iyi çalışıyor.
Encoding ile segment bölmeyi tek seferde yapmak lazım (ör. ffmpeg'in dash formatter'ı).
Ses ve video segment uzunluklarını hizalamak için GOP hesaplayıcısı faydalı olabilir.
Genelde yüksek kaliteli bir kaynaktan birden fazla çözünürlük encode edilir, sonra HLS/DASH manifest dosyalarıyla birlikte S3 benzeri bir yere yüklenir.
Oynatıcı da tek bir manifest URL'si üzerinden ihtiyaç duyduğu tüm kaynakları bulur.
Blog yazısı gerçekten çok iyi yazılmış.
Okura uzman muamelesi yapan anlatım tarzı özellikle etkileyiciydi. Keşke bu tarz ürün duyurularını daha sık görsek.
Steve, tebrikler!
Eskiden JW Player'da çalışırken Video.js'in sadeliği ve tema sistemi beni etkilemişti.
Umarım bu sürüm de büyük başarı yakalar.
FOMS ve çeşitli konferanslarda JW ekibiyle sohbet etmek keyifliydi.
Video teknolojileri hâlâ çok hareketli bir alan, o yüzden istersen her zaman geri dönebilirsin.
%88 rakamı gerçekten etkileyici.
En büyük iyileştirme kaleminin ne olduğunu merak ediyorum — muhtemelen plugin sistemidir.
Rewrite sırasında önemli entegrasyonların bozulup bozulmadığını da öğrenmek isterim.
Rewrite sürecindeki mimari değişikliklerin ve önceki Video.js tasarımına kıyasla hangi trade-off'ların yapıldığının anlatılmasını merak ediyorum.