Title: Додайте функцію трансляції до свого відеоплеєра, не порушуючи його роботу

Трансляція відео з браузера на телевізор здається простою справою, але більшість кастомних HTML5-плеєрів перестають працювати, щойно ви намагаєтеся це зробити. У нещодавньому посібнику для розробників перелічено чотири приховані точки відмови — закінчення терміну дії токена, блокування CORS, недоступні хости та пастка MSE-blob — і показано, як саме уникнути кожної з них.

Чому трансляція створює проблеми для кастомних плеєрів

Коли ви натискаєте Cast, телевізор не запускає ваш JavaScript-плеєр. Він отримує URL-адресу потоку, яку ви йому передали, і відтворює медіа за допомогою власної прошивки. Оверлеї, аналітичні запити та логіка адаптивного бітрейту залишаються в браузері. Якщо телевізор не може отримати той самий URL за тих самих умов, відтворення зупиняється, часто без жодної очевидної помилки в консолі.

Чотири поширені причини проблем

  • Token expiry (Закінчення терміну дії токена) – Короткочасний токен безпеки працює в браузері, але телевізор може тримати цей потік протягом дев'яноста хвилин. Коли термін дії токена закінчується, відео зупиняється. Використовуйте токени з довшим терміном дії для сесій трансляції.
  • CORS errors (Помилки CORS) – CORS визначає, які домени можуть запитувати ресурс. Телевізор вважається окремим джерелом (origin), тому, якщо ваш відеосервер дозволяє запити лише з домену сторінки, запит телевізора буде заблоковано, навіть якщо той самий URL працює в браузері.
  • Unreachable hosts (Недоступні хости) – У середовищах розробки часто використовуються localhost, внутрішні імена хостів або приватні діапазони IP-адрес. Телевізор знаходиться в іншому сегменті мережі та не може розпізнати або маршрутизувати запити до цих адрес, що призводить до «тихих» збоїв.
  • The MSE trap (Пастка MSE) – Media Source Extensions (MSE) дозволяють браузерам «зшивати» фрагменти відео на льоту, часто представляючи відео як URL-адресу типу blob:. Такі бібліотеки, як hls.js, створюють ці blob-об'єкти для адаптивного стрімінгу. Телевізори не можуть завантажити blob; їм потрібна URL-адреса фактичного маніфесту (наприклад, .m3u8 або .mpd). Замініть джерело на реальний маніфест перед викликом діалогового вікна трансляції.

Покроковий чек-лист

  1. Визначте підтримку трансляції – Використовуйте Remote Playback API для Chrome або події WebKit для Safari. Це дозволить дізнатися, чи може браузер взагалі передати відтворення.
  2. Відстежуйте стан підключення – Не вважайте, що натискання кнопки гарантує стабільне з'єднання. Підпишіться на події connecting, connected та disconnect об'єкта Remote Playback. Вважайте телевізор першоджерелом інформації; оновлюйте інтерфейс лише після отримання події connected.
  3. Перейдіть на пряму URL-адресу з довшим терміном дії – Перед викликом remotePlayback.prompt() замініть src відеоелемента на URL-адресу маніфесту, яку телевізор зможе завантажити. Зберігайте оригінальне джерело на основі blob для локального відтворення, але перемикайтеся на маніфест лише для сесії трансляції.
  4. Перевірте за допомогою мінімального тесту – Створіть просту HTML-сторінку з одним тегом <video>, що вказує на URL-адресу маніфесту, без жодного JavaScript, і залиште її працювати на годину. Якщо відео зупиниться, потік також не працюватиме на телевізорі. Виправте термін дії токенів, заголовки CORS або доступність хостів перед тим, як додавати кнопку трансляції.

Що отримають розробники

Додайте надійну кнопку трансляції, не порушуючи роботу решти плеєра.

Підсумок

Трансляція — це не функція типу «підключив і забув» для кастомних відеоплеєрів; вона передає відтворення в зовсім інше середовище. Забезпечивши наявність URL-адреси з довшим терміном дії та дозволом CORS, уникаючи посилань на blob і відстежуючи події підключення телевізора, ви зможете додати кнопку трансляції, яка працюватиме надійно, а не зламає весь ваш плеєр.