Video.js 10.0.0 resmi mencapai general availability pada 1 Oktober 2026, setelah satu tahun pengembangan dan pengujian. Menurut pengumuman resmi dari Steve Heffernan, rilis ini bukan sekadar pembaruan, melainkan pembangunan ulang dari nol yang menggabungkan pelajaran dari lima pemutar video: Video.js, Plyr, Vidstack, Media Chrome, dan Mux Player. Klaim paling menarik ada di ukuran bundel: benchmark versi release candidate menunjukkan pengurangan 60 persen dibandingkan bundel bawaan Video.js v8. Namun ada satu detail penting yang sering terlewat, paket video.js di npm masih versi 8.
TL;DR
- Video.js 10.0.0 GA dirilis 1 Oktober 2026 setelah setahun pengembangan.
- Benchmark RC menunjukkan bundel 60 persen lebih kecil dari Video.js v8.
- Dukungan kelas satu untuk React, Web Components, TypeScript, dan Tailwind.
- Kulit pemutar bisa ditarik ke proyek lewat Shadcn CLI.
- Paket npm video.js masih v8; v10 dikirim sebagai @videojs/react dan @videojs/html.
Apa yang Baru di Video.js v10?
Perubahan paling mencolok adalah arsitektur yang bisa dikomposisi. Alih-alih mengirim satu bundel besar yang berisi semua fitur, v10 memungkinkan kamu meninggalkan bagian yang tidak dipakai. Menurut pengumuman resmi, benchmark pada tahap release candidate menunjukkan pengurangan 60 persen dibandingkan bundel bawaan Video.js v8, yang di dalamnya sudah termasuk adaptive streaming. Efeknya bukan hanya unduhan lebih kecil, tetapi juga waktu muat yang lebih cepat, terutama di jaringan yang tidak ideal.
Selain ukuran, v10 menata ulang cara pemutar berinteraksi dengan framework. Ada komponen React kelas satu, Web Components untuk HTML biasa, dukungan TypeScript dan Tailwind yang setara, serta pemisahan jelas antara state, antarmuka, dan media. Dengan pemisahan itu, kamu bisa mengubah satu bagian tanpa harus membangun ulang seluruh pemutar di sekitarnya. Ini perbedaan arsitektur yang berdampak besar pada proyek yang tumbuh besar seiring waktu.
Bagaimana Cara Memasang Video.js v10?
Cara paling penting untuk diingat: v10 dikirim sebagai paket @videojs/react dan @videojs/html. Paket video.js di npm masih menunjuk ke versi 8, jadi memasang video.js tidak akan memberimu v10. Untuk proyek React, gunakan @videojs/react; untuk HTML biasa, gunakan @videojs/html. Dokumentasi resmi menyediakan jalur pemasangan yang berbeda untuk setiap framework, termasuk opsi CDN bagi yang tidak memakai proses build.
Untuk yang memakai React, pendekatannya adalah menyusun komponen pemutar dari bagian-bagian yang tersedia. Untuk yang memakai HTML biasa, Web Components memberi cara yang mirip tanpa harus menambahkan framework. Kalau kamu ingin agen kode membantu, tim Video.js juga merilis skill resmi yang bisa dipasang dengan perintah npx @videojs/cli agents skills, sehingga asisten kode memakai pola v10 yang benar alih-alih pola v8 yang sudah usang.
Apakah Migrasi dari Video.js v8 Itu Drop-in?
Tidak. Pengumuman resmi menyebut v10 sebagai pembangunan ulang, bukan pembaruan yang bisa langsung dipasang. API lama dari v8 perlu diterjemahkan ke pola baru. Untuk membantu proses itu, tersedia panduan migrasi yang mencakup perpindahan dari Video.js v8, Mux Player, Media Chrome, maupun Vidstack. Karena kelima proyek itu kini bertemu di satu basis kode, panduan migrasinya memang dirancang untuk beberapa titik awal sekaligus.
Praktik yang aman adalah memigrasikan satu pemutar pada satu waktu, lalu membandingkan perilakunya dengan versi lama pada kasus yang sama. Karena arsitektur dan API berubah, menganggap migrasi sebagai pekerjaan mekanis justru berisiko. Yang berubah bukan hanya nama fungsi, tetapi juga cara berpikir tentang bagaimana state, antarmuka, dan media saling terhubung.
Bagaimana Perbandingan Video.js v8 dan v10?
Tabel berikut merangkum perbedaan yang paling relevan bagi tim yang sedang mempertimbangkan upgrade.
| Aspek | Video.js v8 | Video.js v10 |
|---|---|---|
| Ukuran bundel bawaan | Basis pembanding | Sekitar 60 persen lebih kecil |
| Arsitektur | Monolitik | Bisa dikomposisi |
| Paket npm | video.js | @videojs/react dan @videojs/html |
| Komponen React | Tidak kelas satu | Kelas satu |
| Dukungan Shadcn | Tidak ada | Ada lewat CLI |
| Dukungan browser | Lebih luas | Safari 16 ke atas dengan kulit Compat |
Apakah Semua Fitur Sudah Siap di v10?
Belum semuanya. Mesin streaming baru bernama SPF bertanggung jawab atas sebagian besar penghematan ukuran, tetapi belum mendukung iklan maupun siaran langsung latensi rendah sejati. Namun ini tidak menghalangi penggunaan v10. Untuk kebutuhan tersebut, tersedia komponen HlsJsVideo yang berbasis HLS.js dan saat ini menjadi bawaan untuk HLS. Artinya, pemutar dan mesin streaming adalah dua pilihan terpisah yang bisa kamu kombinasikan sesuai kebutuhan.
Pendekatan itu masuk akal untuk rilis awal. Tim memilih merilis inti yang sudah matang, lalu memperluas dukungan fitur secara bertahap, daripada menahan seluruh rilis sampai semua kasus terpenuhi. Bagi tim yang membutuhkan iklan atau latensi rendah, jalur HLS.js tetap tersedia, sehingga kamu tidak harus menunggu untuk mulai memakai v10.
Bagaimana dengan Lisensi dan Dukungan Komunitas?
Video.js tetap gratis dan open source dengan lisensi Apache 2.0. Proyek ini dimulai pada 2010, awalnya untuk membantu memindahkan video dari Flash ke web terbuka. Enam belas tahun kemudian, bagian dari pemutar masih dibangun di atas keputusan arsitektur awal itu, dan itulah yang mendorong keputusan untuk membangun ulang. Dengan menggabungkan komunitas dari lima proyek, basis kontributornya kini lebih besar daripada ketika proyek ini berdiri sendiri.
Bagi pengembang di Indonesia yang membangun layanan video, perubahan ini relevan karena ukuran bundel berdampak langsung pada pengalaman pengguna di jaringan seluler. Menurunkan ukuran unduhan awal berarti pemutar bisa tampil lebih cepat dan hemat kuota. Namun karena ini pembangunan ulang, jangan menganggapnya sebagai penggantian gratis: alokasikan waktu untuk membaca panduan migrasi dan menguji ulang alur yang sudah berjalan.
Siapa yang Paling Cocok Memakai Video.js v10?
Tim yang paling diuntungkan adalah yang membangun antarmuka video dengan React atau Web Components dan peduli pada ukuran unduhan. Karena v10 bisa dikomposisi, kamu hanya mengirim fitur yang benar-benar dipakai, dan itu berdampak langsung pada pengalaman pengguna di jaringan seluler. Tim yang ingin mengubah tampilan pemutar tanpa menunggu opsi konfigurasi baru juga mendapat manfaat besar, karena kulit pemutar bisa ditarik ke proyek dan diedit sebagai berkas biasa.
Sebaliknya, kalau produkmu bergantung pada iklan atau siaran langsung latensi rendah yang belum didukung mesin SPF, jalur HLS.js tetap tersedia, tetapi kamu perlu mempertimbangkan apakah waktunya tepat untuk pindah sekarang. Bagi tim yang pemutarnya sudah stabil dan tidak punya kebutuhan baru, menunda migrasi sampai ekosistem menyesuaikan diri adalah keputusan yang masuk akal dan hemat tenaga.
Bagaimana Cara Menguji Dampak Ukuran Bundel?
Langkah pertama adalah mengukur keadaan sekarang sebelum mengubah apa pun. Catat ukuran berkas yang benar-benar diunduh pengguna, bukan hanya ukuran paket di registri. Setelah itu, susun pemutar versi v10 hanya dengan fitur yang dipakai, bangun proyek, lalu bandingkan angkanya pada kondisi jaringan yang sama. Mengukur pada perangkat dan koneksi nyata lebih bermakna daripada mengandalkan benchmark sintetis, karena yang kamu optimalkan adalah pengalaman pengguna.
Perhatikan juga bahwa penghematan terbesar datang dari meninggalkan fitur yang tidak dipakai. Kalau kamu akhirnya memakai hampir semua fitur, selisihnya akan lebih kecil daripada klaim benchmark. Karena itu, keputusan pentingnya bukan sekadar naik ke v10, tetapi memetakan fitur mana yang benar-benar dibutuhkan produkmu, lalu menyusun bundel sesuai daftar itu.
Apakah Ada Alternatif Selain Video.js?
Ada, dan menariknya sebagian besar kini bertemu di basis kode yang sama. Karena v10 menggabungkan pelajaran dari Video.js, Plyr, Vidstack, Media Chrome, dan Mux Player, pilihan yang dulu terpisah kini bermuara pada satu proyek. Ini menyederhanakan lanskap, karena kamu tidak lagi harus memilih di antara lima ekosistem yang berbeda arah. Untuk pemutar HTML5 sederhana, Web Components dari v10 memberi jalur paling ringan tanpa menambahkan framework.
Yang tetap perlu dipertimbangkan adalah kebutuhan spesifik seperti iklan sisi klien, perlindungan konten, atau analitik yang dalam. Untuk kasus itu, periksa dulu apakah komponen yang kamu butuhkan sudah tersedia di v10, atau apakah jalur HLS.js dan integrasi pihak ketiga bisa menutupinya. Keputusan yang baik selalu dimulai dari kebutuhan produk, bukan dari nomor versi terbaru.
Apakah Skill untuk Agen Kode Itu Perlu?
Kalau kamu memakai asisten kode untuk membantu membangun antarmuka pemutar, skill resmi itu cukup berguna. Masalah umum saat memakai asisten kode dengan pustaka yang baru dirilis besar adalah model cenderung menulis pola dari versi lama, karena itu yang paling banyak ada di data pelatihannya. Skill resmi menyediakan pola dan rujukan dokumentasi versi terbaru, sehingga keluaran asisten lebih kecil kemungkinannya memakai API v8 yang sudah tidak berlaku. Memasangnya hanya butuh satu perintah, dan manfaatnya paling terasa ketika kamu meminta agen menulis komponen pemutar dari nol.
Apa yang Harus Disiapkan Sebelum Migrasi?
Sebelum menyentuh kode, kumpulkan daftar fitur pemutar yang benar-benar dipakai produkmu. Daftar ini menjadi dasar untuk memilih komponen di v10 dan menentukan berapa besar penghematan yang bisa didapat. Setelah itu, siapkan lingkungan pengujian yang mewakili perangkat dan jaringan pengguna, karena perbedaan performa paling terasa di sana. Terakhir, baca panduan migrasi untuk titik awalmu, apakah itu v8, Mux Player, Media Chrome, atau Vidstack, karena langkahnya berbeda untuk masing-masing.
Menganggap migrasi sebagai proyek kecil biasanya berakhir dengan jadwal yang melebar. Alokasikan waktu khusus, kerjakan bertahap, dan uji setiap tahap sebelum lanjut. Dengan begitu, ketika ada perilaku yang berbeda dari versi lama, kamu bisa melacaknya ke perubahan tertentu, bukan menghadapi tumpukan perubahan sekaligus dan kehilangan jejak mana yang menjadi penyebab.
FAQ
Apakah Video.js v10 gratis?
Ya. Video.js tetap gratis dan open source dengan lisensi Apache 2.0, sama seperti versi sebelumnya, dengan pengembangan yang didukung komunitas serta sponsor hosting video.
Kenapa npm masih memasang Video.js v8?
Karena v10 dikirim sebagai paket terpisah, yaitu @videojs/react dan @videojs/html. Paket video.js di npm memang masih menunjuk ke versi 8 untuk saat ini.
Apakah v10 mendukung siaran langsung latensi rendah?
Belum lewat mesin SPF. Untuk kebutuhan itu, gunakan komponen HlsJsVideo yang berbasis HLS.js, yang saat ini menjadi bawaan untuk HLS di v10.
Browser apa saja yang didukung v10?
Dengan kulit Compat yang baru, dukungan browser mundur hingga Safari 16. Kulit baru itu dirancang agar pemutar tetap berjalan di versi browser yang lebih lama.
Apakah migrasi dari v8 sulit?
Bukan migrasi drop-in. API lama perlu diterjemahkan ke pola baru, tetapi tersedia panduan migrasi resmi yang mencakup v8, Mux Player, Media Chrome, dan Vidstack.
Sumber utama: pengumuman Video.js v10 GA, dokumentasi resmi Video.js, repositori videojs/video.js di GitHub, dan halaman paket video.js di npm.
💬 Komentar (0)
Belum ada komentar. Jadilah yang pertama! 💬