Title: Tambahkan Fitur Casting ke Pemutar Video Anda Tanpa Merusaknya

Melakukan casting video dari browser ke TV tampak sederhana, tetapi sebagian besar pemutar HTML5 kustom akan rusak saat mencobanya. Sebuah panduan pengembang terbaru mencantumkan empat titik kegagalan tersembunyi—kedaluwarsa token, blokir CORS, host yang tidak dapat dijangkau, dan jebakan MSE-blob—serta menunjukkan cara tepat untuk menghindari masing-masing masalah tersebut.

Mengapa casting menyulitkan pemutar kustom

Saat Anda menekan Cast, TV tidak menjalankan pemutar JavaScript Anda. TV akan mengambil URL stream yang Anda berikan dan memutar media tersebut dengan firmware-nya sendiri. Overlay, ping analitik, dan logika adaptive-bitrate tetap berada di browser. Jika TV tidak dapat mengambil URL yang sama dalam kondisi yang sama, pemutaran akan berhenti, sering kali tanpa ada kesalahan yang jelas di konsol.

Empat penyebab umum

  • Token expiry – Token keamanan berdurasi singkat berfungsi di browser. Namun, TV mungkin memutar stream tersebut selama sembilan puluh menit. Saat token kedaluwarsa, video akan berhenti. Gunakan token dengan masa berlaku lebih lama untuk sesi casting.
  • CORS errors – CORS menentukan domain mana yang boleh meminta sumber daya. TV dianggap sebagai origin yang terpisah, jadi jika server video Anda hanya memasukkan domain halaman ke dalam whitelist, permintaan TV akan diblokir meskipun URL yang sama berfungsi di browser.
  • Unreachable hosts – Pengaturan pengembangan sering kali menggunakan localhost, hostname internal, atau rentang IP pribadi. TV berada di segmen jaringan yang berbeda dan tidak dapat melakukan resolve atau routing ke alamat-alamat tersebut, yang menyebabkan kegagalan tanpa pesan error (silent failure).
  • The MSE trap – Media Source Extensions (MSE) memungkinkan browser menyatukan potongan-potongan (chunks) secara langsung, yang sering kali mengekspos video sebagai URL blob:. Library seperti hls.js menghasilkan blob tersebut untuk adaptive streaming. TV tidak dapat mengambil blob; mereka membutuhkan URL manifest yang sebenarnya (misalnya, .m3u8 atau .mpd). Ganti sumbernya ke manifest asli sebelum memanggil dialog casting.

Daftar periksa langkah demi langkah

  1. Deteksi dukungan casting – Gunakan Remote Playback API untuk Chrome atau event WebKit untuk Safari. Ini memberi tahu Anda apakah browser dapat mengalihkan pemutaran sama sekali.
  2. Pantau status koneksi – Jangan berasumsi bahwa klik tombol menjamin tautan yang stabil. Berlanggananlah (subscribe) ke event connecting, connected, dan disconnect dari objek Remote Playback. Anggap TV sebagai sumber kebenaran (source of truth); perbarui UI hanya setelah Anda menerima event connected.
  3. Ganti ke URL langsung yang berdurasi lama – Sebelum Anda memanggil remotePlayback.prompt(), ganti src elemen video dengan URL manifest yang dapat diambil oleh TV. Tetap gunakan sumber berbasis blob yang asli untuk pemutaran lokal, tetapi ganti hanya untuk sesi casting.
  4. Validasi dengan pengujian sederhana – Buat halaman HTML polos dengan satu tag <video> yang mengarah ke URL manifest, tanpa JavaScript, dan biarkan berjalan selama satu jam. Jika video berhenti, stream yang mendasarinya juga akan gagal di TV. Perbaiki masa berlaku token, header CORS, atau aksesibilitas host sebelum menambahkan tombol casting.

Keuntungan bagi pengembang

Tambahkan tombol casting yang andal tanpa merusak bagian pemutar lainnya.

Kesimpulan

Casting bukanlah fitur plug-and-play untuk pemutar video kustom; fitur ini mengalihkan pemutaran ke lingkungan yang sepenuhnya berbeda. Dengan menyediakan URL yang berdurasi lama dan disetujui CORS, menghindari referensi blob, serta mendengarkan event koneksi TV, Anda dapat menambahkan tombol casting yang berfungsi dengan andal alih-alih merusak seluruh pemutar Anda.