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

Трансляция видео из браузера на телевизор кажется простой задачей, но большинство кастомных HTML5-плееров перестают работать, как только вы пытаетесь это сделать. В недавнем руководстве для разработчиков перечислены четыре скрытые точки отказа — истечение срока действия токена, блокировки CORS, недоступные хосты и ловушка MSE-blob — и показано, как обойти каждую из них.

Почему трансляция мешает работе кастомных плееров

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

Четыре распространенные причины проблем

  • Истечение срока действия токена — короткоживущий токен безопасности работает в браузере, но телевизор может удерживать поток в течение девяноста минут. Когда срок действия токена истекает, видео останавливается. Для сессий трансляции выпускайте токены с более длительным сроком действия.
  • Ошибки CORS — CORS определяет, какие домены могут запрашивать ресурс. Телевизор считается отдельным источником (origin), поэтому, если ваш видеосервер разрешает запросы только с домена страницы, запрос телевизора будет заблокирован, даже если тот же URL работает в браузере.
  • Недоступные хосты — в средах разработки часто используются localhost, внутренние имена хостов или частные диапазоны IP-адресов. Телевизор находится в другом сегменте сети и не может разрешить эти адреса или маршрутизировать к ним запросы, что приводит к «тихим» сбоям.
  • Ловушка MSE — Media Source Extensions (MSE) позволяют браузерам «сшивать» фрагменты на лету, часто представляя видео в виде URL-адреса blob:. Такие библиотеки, как hls.js, генерируют подобные blob-объекты для адаптивного стриминга. Телевизоры не могут загрузить blob; им нужен URL фактического манифеста (например, .m3u8 или .mpd). Перед вызовом диалога трансляции замените источник на реальный URL манифеста.

Пошаговый чек-лист

  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 и отслеживая события соединения телевизора, вы сможете добавить кнопку трансляции, которая будет работать надежно, а не ломать весь ваш плеер.