Video.js v10 - pemutar video open source 88% lebih kecil

 (videojs.org)
13 poin oleh GN⁺ 28 hari lalu | 1 komentar | Bagikan ke WhatsApp
  • Video.js v10 yang ditulis ulang sepenuhnya untuk pertama kalinya dalam 16 tahun mengurangi ukuran bundle sebesar 88% dan lahir kembali dengan struktur yang sesuai untuk lingkungan pengembangan modern
  • Mendukung React, TypeScript, dan Tailwind sebagai warga kelas satu, serta menyediakan UI bawaan yang estetis dan struktur dokumentasi yang ramah AI
  • Dengan Streaming Processor Framework (SPF) yang baru, dihadirkan mesin streaming modular yang memungkinkan penggabungan hanya fitur yang dibutuhkan, mencapai bobot ringan setara 12% dibanding HLS.js
  • Dengan arsitektur berbasis composition dan sistem skin React/Web Components, UI dan fitur dapat diganti atau dihapus dengan bebas
  • Menargetkan rilis resmi pada 2026, dan sedang berkembang menjadi platform media open source generasi berikutnya melalui pengembangan kolaboratif dengan AI dan ekosistem preset yang dapat diskalakan

Gambaran umum beta Video.js v10

  • Beta Video.js v10.0.0 adalah penulisan ulang total pertama dalam 16 tahun, hasil kolaborasi tidak hanya dari Video.js tetapi juga berbagai proyek open source seperti Plyr, Vidstack, dan Media Chrome
  • Ekosistem dengan total 75 ribu GitHub stars dan skala miliaran pemutaran per bulan ikut berpartisipasi, dan dirancang ulang dengan mempertimbangkan metode pengembangan modern serta lingkungan pengembangan berbantuan AI
  • Tujuan utamanya adalah mengurangi ukuran bundle sebesar 88%, memberikan dukungan kelas satu untuk React, TypeScript, dan Tailwind, serta menyediakan UI bawaan yang estetis dan struktur dokumentasi yang ramah AI

Peningkatan ukuran bundle dan performa

  • Pemutar dasar Video.js v10 memiliki ukuran bundle dasar 88% lebih kecil dibanding v8, dan bahkan saat fungsi ABR (Adaptive Bitrate) dihapus masih 66% lebih kecil
    • Contoh: basis v8 260.5kB (minified) → pemutar video HTML v10 97.4kB (minified), versi React 62.0kB
  • Dengan diperkenalkannya Streaming Processor Framework (SPF) yang baru, dimungkinkan membangun mesin streaming modular yang hanya menggabungkan fitur yang diperlukan
    • Untuk penggunaan HLS sederhana, v10+SPF hanya 19% dari ukuran file v8+VHS
    • Mesin SPF sendiri hanya 12% dari ukuran HLS.js-light (38.5kB minified) dan dioptimalkan untuk pemrosesan ABR sederhana
  • SPF kompatibel dengan semua mesin yang ada seperti HLS.js, Shaka, dan dash.js, sehingga bila fitur DRM atau iklan yang kompleks tidak dibutuhkan, pengurangan ukuran ekstrem dapat dicapai

Arsitektur berbasis composition

  • v10 memakai struktur komponen yang memisahkan State, UI, dan Media, sehingga setiap elemen dapat diganti atau dihapus secara independen
    • Fungsi createPlayer() menerima array features untuk hanya menyertakan fitur yang diperlukan
    • Contoh: jika fitur audio tidak dibutuhkan, kode volume dan mute tidak akan ikut masuk ke bundle
  • Untuk menghapus UI, cukup jangan memuat skin — kode yang tidak diperlukan bisa dikeluarkan sepenuhnya
  • Contoh React dengan konfigurasi minimum berjalan dengan ukuran kurang dari 5kB (gzipped) dan hanya mencakup tombol play/pause sederhana

Kustomisasi UI dan sistem skin

  • v10 menyediakan sistem skin berbasis React dan Web Components, dan mengadopsi struktur unstyled UI primitives yang terinspirasi dari Base UI dan Radix
    • Setiap komponen UI menghasilkan satu elemen HTML sehingga dapat dikendalikan secara langsung
  • Handle timeline yang pada v8 dikendalikan dengan pseudo-element CSS kini pada v10 disediakan sebagai elemen DOM nyata, sehingga styling menjadi lebih sederhana
  • Beta ini menyertakan dua skin
    • Skin bawaan: estetika semi-transparan (frosted), animasi halus
    • Skin minimal: bentuk dasar ringkas untuk kustomisasi
  • Desain dialog error pada skin juga diseragamkan, sehingga kualitas visual meningkat

Sistem preset

  • v10 memperkenalkan konsep preset berdasarkan tujuan penggunaan, menyediakan template pemutar siap pakai yang menggabungkan skin, fitur, dan konfigurasi media
    • Video preset: untuk video web umum
    • Audio preset: untuk audio saja seperti podcast
    • Background video preset: untuk video latar, tanpa kontrol dan audio
  • Preset menyediakan titik awal yang cepat, namun semua komponennya tetap dapat diganti, sehingga skalabilitas penuh tetap terjaga
  • Ke depannya akan ditambahkan preset untuk pendidikan, short-form, dan platform kreator

Desain yang ramah AI

  • v10 menargetkan struktur yang memungkinkan AI agent ikut mengembangkan
    • Komponen yang tidak diabstraksikan dan unstyled UI primitives meningkatkan keterpahaman kode
    • Menyediakan file llms.txt untuk efisiensi penelusuran dokumentasi, termasuk versi per framework
    • Semua dokumentasi disediakan dalam format Markdown, sehingga AI dapat mengaksesnya langsung tanpa konteks HTML yang tidak perlu
    • Dukungan pengembangan pengguna di masa depan direncanakan melalui AI skill set dalam repositori

Panduan penggunaan beta

  • API masih belum stabil, dan beberapa antarmuka dapat berubah sebelum rilis resmi
  • Saat ini berfokus pada fitur pemutaran dasar untuk website; aksesibilitas, subtitle, dan dukungan berbagai format dimungkinkan, tetapi menu pengaturan dan sejenisnya belum diimplementasikan
  • Feedback melalui GitHub Issues dan Discord sedang dikumpulkan secara aktif
  • Pengguna versi lama disarankan bermigrasi setelah migration guide dipublikasikan

Roadmap berikutnya

  • Menargetkan rilis resmi (GA) pada pertengahan 2026
  • Direncanakan mencapai kesetaraan fitur dengan Plyr, Vidstack, dan Media Chrome
  • Dukungan fitur iklan direncanakan untuk paruh kedua 2026
  • Migration guide dan preset tambahan akan disediakan

Bacaan terkait

1 komentar

 
GN⁺ 28 hari lalu
Komentar Hacker News

  • Bagi yang penasaran, tema warna syntax highlighting di situs ini adalah “gruvbox”
    Secara pribadi saya sangat suka, tapi butuh waktu cukup lama untuk menemukannya
    tautan GitHub gruvbox

    • Ada yang tahu situs ini dibuat dengan teknologi apa? Saya sangat suka desain dan UI-nya
    • Sebagai info, tema ini juga bisa dipakai di VSCode

  • Saya belum pernah memakai video.js, tapi rasanya situs dan iklannya ditujukan untuk orang yang sudah familiar dengannya
    Satu hal yang saya terus tanyakan saat membaca adalah, apa bedanya dengan tag video HTML? Apa cuma controllernya yang berbeda?

    • Poin yang bagus. Situsnya memang perlu menjelaskan bagian itu dengan lebih jelas
      Tag video sekarang memang sudah cukup bagus, tapi Video.js punya pembeda seperti styling yang konsisten antar-browser, fitur lanjutan (analitik, DRM, video 360 derajat, dll.), dan dukungan berbagai format streaming (HLS, DASH, dll.)
      Pada akhirnya, ini memang bisa dibuat dengan tag video, tapi kalau begitu ujung-ujungnya Anda akan membuat sesuatu seperti Video.js sendiri
    • Tag video tidak bekerja dengan baik di semua lingkungan. Ada banyak edge case di tiap browser
      Kalau Anda butuh player atau fitur streaming yang stabil, sebaiknya pakai Video.js
      Sebagai referensi, saya pernah membuat player siaran TV untuk negara Georgia yang mendukung dari LG SmartTV 2009 sampai browser terbaru
    • Kebanyakan browser tidak mendukung HLS atau DASH
      Ini penting karena penyesuaian bitrate dinamis. Caching juga jadi lebih efisien

  • Saya penasaran apakah situasi soal WebVTT sudah berubah belakangan ini
    Dulu saya pernah mencoba mengustomisasi rendering subtitle, dan itu sangat sulit

  • Saya penasaran kenapa ini tidak didistribusikan sebagai Web Component
    Menurut saya ini use case yang sempurna — ada kontrol bawaan pada objek yang bermakna

    • Pertanyaan bagus. Dulu saat mencoba membuat media-chrome dan Mux Player sebagai Web Component, saya banyak kesulitan karena masalah integrasi React
      Pada akhirnya kami menyelesaikannya dengan membuat shim untuk React, tapi itu malah menimbulkan masalah lain
      Di VJS 10, kami menemukan titik kompromi dengan arsitektur headless core + lapisan rendering
      Hasilnya, React component dan Web Component sama-sama didukung
      tautan GitHub media-chrome
    • Web Component memang terlihat keren, tapi pada praktiknya sangat menyita waktu karena masalah styling dan SSR
      Karena bug Shadow DOM dan kompatibilitas antar-framework, akhirnya waktu yang dihabiskan untuk setup lingkungan lebih banyak daripada untuk player itu sendiri
      Kebanyakan pengguna tidak peduli soal itu. Menurut saya library JS + API yang rapi jauh lebih baik
    • Sebenarnya karena kode React dikompilasi menjadi HTML Custom Elements, dalam arti luas ini sudah merupakan Web Component
      Hanya saja, alasan memakai React adalah karena tree-shaking memungkinkan hanya kode yang dibutuhkan yang ikut dimasukkan
      Dalam HTML biasa, optimasi seperti ini masih sulit, jadi build pipeline pada dasarnya berperan sebagai semacam generator Web Component

  • Saya sempat mencoba mengganti audio player saya dari Plyr ke Video.js, tapi ada beberapa kesenjangan fitur pada pengaturan default
    Tidak ada kecepatan putar di bawah 1x, tidak bisa mengatur volume di mobile, tidak ada tombol seek, sulit mengustomisasi warna, demo kurang, dan lain-lain

    • Masukan yang bagus. Saya akan mendaftarkan isu untuk hal-hal ini
      Saat ini kami menargetkan feature parity dengan Plyr dan lain-lain, serta menargetkan GA sekitar pertengahan tahun ini

  • Saya tidak terlalu paham soal video hosting, tapi pernah memakai HTML5 video player
    Saya penasaran apakah di sisi server saya perlu membuat endpoint yang langsung menyajikan chunk video
    Jika saya membaginya menjadi unit 2MB dengan ffmpeg, sebaiknya saya taruh di mana? CDN? Server sendiri?
    Konfigurasi seperti apa yang paling optimal agar Video.js berjalan semulus mungkin?

    • Tinggal konversi ke HLS saja. Nanti otomatis dipecah menjadi chunk 1~2 detik, dan bisa disajikan sebagai file statis lewat nginx
      Cocok dengan Video.js, dan di LG TV juga bisa memutar berbasis tag
    • Kalau Anda tidak perlu pergantian versi saat runtime (ABR), pemecahan chunk manual juga tidak diperlukan
      Selama server mendukung permintaan Range, browser akan menanganinya sendiri
      Saya memakai kombinasi object storage + CDN seperti DO Spaces, dan itu berjalan baik
    • Tapi chunk harus dimulai dengan keyframe IDR, jadi sebenarnya tidak sesederhana itu
      Encoding dan segmentasi harus ditangani sekaligus (misalnya dengan formatter dash di ffmpeg)
      Untuk menyamakan panjang segmen audio dan video, kalkulator GOP sangat membantu
      Umumnya, Anda meng-encode beberapa resolusi dari sumber berkualitas tinggi, lalu mengunggahnya bersama manifest HLS/DASH ke tempat seperti S3
      Player kemudian mengikuti satu URL manifest untuk menemukan semua resource yang dibutuhkan
    • MPE-DASH juga layak dipertimbangkan

  • Postingan blognya benar-benar ditulis dengan sangat baik
    Cara penjelasannya yang menghormati pembaca sebagai orang yang ahli sangat berkesan. Saya berharap ada lebih banyak pengumuman produk seperti ini

  • Selamat, Steve!
    Dulu saat bekerja di JW Player, saya terkesan dengan kesederhanaan Video.js dan sistem temanya
    Semoga versi kali ini juga sukses besar

    • Lama tak jumpa, Zach! Senang melihatmu lagi
      Menyenangkan bisa berbincang dengan tim JW di FOMS dan berbagai konferensi
      Teknologi video masih merupakan bidang yang panas, jadi semoga suatu saat kamu kembali lagi

  • Angka 88% itu mengejutkan
    Saya penasaran apa titik peningkatan terbesar — mungkin sistem plugin
    Saya juga ingin tahu apakah fitur integrasi utama sempat rusak selama proses rewrite

  • Saya penasaran soal perubahan arsitektur selama proses rewrite, dan trade-off dibanding desain Video.js sebelumnya