Tajuk: Tambah Fungsi Casting ke Pemain Video Anda Tanpa Merosakkannya

Melakukan casting video daripada pelayar ke TV kelihatan mudah, tetapi kebanyakan pemain HTML5 tersuai akan gagal sebaik sahaja anda mencubanya. Satu panduan pembangun baru-baru ini menyenaraikan empat punca kegagalan tersembunyi—tamat tempoh token, sekatan CORS, hos yang tidak dapat dicapai, dan perangkap MSE-blob—serta menunjukkan cara tepat untuk mengelakkan setiap satunya.

Mengapa casting mengganggu pemain tersuai

Apabila anda menekan Cast, TV tidak menjalankan pemain JavaScript anda. Ia akan mengambil URL penstriman yang anda berikan dan memainkan media tersebut menggunakan perisian tegar (firmware) sendiri. Lapisan (overlays), ping analitik, dan logik kadar bit adaptif (adaptive-bitrate) kekal di dalam pelayar. Jika TV tidak dapat mengambil URL yang sama di bawah keadaan yang sama, main balik akan terhenti, selalunya tanpa sebarang ralat yang jelas dalam konsol.

Empat punca utama yang biasa

  • Tamat tempoh token – Token keselamatan jangka pendek berfungsi dalam pelayar. TV mungkin mengekalkan penstriman tersebut selama sembilan puluh minit. Apabila token tamat tempoh, video akan terhenti. Keluarkan token yang lebih lama untuk sesi casting.
  • Ralat CORS – CORS menentukan domain mana yang boleh meminta sumber. TV dianggap sebagai asal (origin) yang berasingan, jadi jika pelayan video anda hanya menyenarai putih (whitelist) domain halaman tersebut, permintaan TV akan disekat walaupun URL yang sama berfungsi dalam pelayar.
  • Hos yang tidak dapat dicapai – Tetapan pembangunan sering menggunakan localhost, nama hos dalaman, atau julat IP peribadi. TV berada pada segmen rangkaian yang berbeza dan tidak dapat menyelesaikan (resolve) atau menghala ke alamat tersebut, yang membawa kepada kegagalan senyap.
  • Perangkap MSE – Media Source Extensions (MSE) membolehkan pelayar mencantumkan cebisan (chunks) secara langsung, yang sering mendedahkan video sebagai URL blob:. Pustaka seperti hls.js menjana blob sedemikian untuk penstriman adaptif. TV tidak dapat mengambil blob; ia memerlukan URL manifes yang sebenar (contohnya, .m3u8 atau .mpd). Tukar sumber kepada manifes sebenar sebelum memanggil dialog casting.

Senarai semak langkah demi langkah

  1. Kesan sokongan casting – Gunakan Remote Playback API untuk Chrome atau acara WebKit untuk Safari. Ini memberitahu anda sama ada pelayar boleh menyerahkan fungsi main balik atau tidak.
  2. Pantau keadaan sambungan – Jangan anggap klik butang menjamin pautan yang stabil. Langgan acara connecting, connected, dan disconnect daripada objek Remote Playback. Anggap TV sebagai sumber kebenaran (source of truth); kemas kini UI hanya selepas anda menerima acara connected.
  3. Tukar kepada URL terus yang berjangka panjang – Sebelum anda memanggil remotePlayback.prompt(), gantikan src elemen video dengan URL manifes yang boleh diambil oleh TV. Kekalkan sumber berasaskan blob yang asal untuk main balik tempatan, tetapi tukar hanya untuk sesi casting.
  4. Sahkan dengan ujian ringkas – Cipta halaman HTML ringkas dengan satu tag <video> yang menghala ke URL manifes, tanpa JavaScript, dan biarkannya berjalan selama satu jam. Jika video terhenti, penstriman asas juga akan gagal pada TV. Baiki jangka hayat token, pengepala (headers) CORS, atau kebolehcapaian hos sebelum menambah butang casting.

Manfaat kepada pembangun

Tambah butang casting yang boleh dipercayai tanpa merosakkan bahagian pemain yang lain.

Rumusan

Casting bukanlah ciri "plug-and-play" untuk pemain video tersuai; ia menyerahkan fungsi main balik kepada persekitaran yang berbeza sepenuhnya. Dengan menyediakan URL yang berjangka panjang dan diluluskan CORS, mengelakkan rujukan blob, serta mendengar acara sambungan TV, anda boleh menambah butang casting yang berfungsi dengan stabil dan bukannya merosakkan keseluruhan pemain anda.