Tytuł: Dodaj funkcję przesyłania obrazu do swojego odtwarzacza wideo, nie psując go

Przesyłanie wideo z przeglądarki na telewizor wydaje się proste, ale większość niestandardowych odtwarzaczy HTML5 przestaje działać w momencie próby jego użycia. Niedawny przewodnik dla programistów wymienia cztery ukryte punkty awarii — wygaśnięcie tokena, blokady CORS, nieosiągalne hosty oraz pułapkę MSE-blob — i pokazuje dokładnie, jak ich uniknąć.

Dlaczego przesyłanie obrazu sprawia problemy niestandardowym odtwarzaczom

Gdy klikasz Cast, telewizor nie uruchamia Twojego odtwarzacza JavaScript. Pobiera on adres URL strumienia, który mu przekazałeś, i odtwarza media za pomocą własnego oprogramowania układowego (firmware). Nakładki, sygnały analityczne i logika adaptacyjnego bitrate'u pozostają w przeglądarce. Jeśli telewizor nie może pobrać tego samego adresu URL w tych samych warunkach, odtwarzanie zostaje przerwane, często bez żadnego oczywistego błędu w konsoli.

Czterej najczęstsi winowajcy

  • Wygaśnięcie tokena – Krótkotrwały token bezpieczeństwa działa w przeglądarce. Telewizor może utrzymywać ten strumień przez dziewięćdziesiąt minut. Gdy token wygaśnie, wideo przestaje działać. Generuj dłuższe tokeny dla sesji przesyłania obrazu.
  • Błędy CORS – CORS decyduje, które domeny mogą żądać zasobu. Telewizor jest traktowany jako osobne źródło (origin), więc jeśli Twój serwer wideo uwzględnia na białej liście tylko domenę strony, żądanie telewizora zostanie zablokowane, mimo że ten sam adres URL działa w przeglądarce.
  • Nieosiągalne hosty – Środowiska programistyczne często korzystają z localhost, wewnętrznych nazw hostów lub prywatnych zakresów IP. Telewizor znajduje się w innym segmencie sieci i nie może rozwiązać ani skierować ruchu do tych adresów, co prowadzi do cichych awarii.
  • Pułapka MSE – Media Source Extensions (MSE) pozwalają przeglądarkom na łączenie fragmentów danych w locie, co często skutkuje udostępnieniem wideo jako adres URL typu blob:. Biblioteki takie jak hls.js generują takie bloby dla strumieniowania adaptacyjnego. Telewizory nie potrafią pobrać bloba; potrzebują rzeczywistego adresu URL manifestu (np. .m3u8 lub .mpd). Przed wywołaniem dialogu przesyłania zmień źródło na właściwy manifest.

Lista kontrolna krok po kroku

  1. Wykryj wsparcie dla przesyłania – Użyj Remote Playback API dla Chrome lub zdarzeń WebKit dla Safari. Powie Ci to, czy przeglądarka w ogóle może przekazać odtwarzanie.
  2. Monitoruj stan połączenia – Nie zakładaj, że kliknięcie przycisku gwarantuje stabilne połączenie. Subskrybuj zdarzenia connecting, connected oraz disconnect z obiektu Remote Playback. Traktuj telewizor jako jedyne źródło prawdy; aktualizuj interfejs użytkownika (UI) dopiero po otrzymaniu zdarzenia connected.
  3. Przełącz na długożyjący, bezpośredni adres URL – Zanim wywołasz remotePlayback.prompt(), zastąp atrybut src elementu wideo adresem URL manifestu, który telewizor może pobrać. Zachowaj oryginalne źródło oparte na blobie do lokalnego odtwarzania, ale przełącz je tylko na czas sesji przesyłania.
  4. Zweryfikuj za pomocą podstawowego testu – Utwórz prostą stronę HTML z pojedynczym znacznikiem <video> wskazującym na adres URL manifestu, bez JavaScriptu, i pozwól jej działać przez godzinę. Jeśli wideo zostanie przerwane, strumień podstawowy również zawiedzie na telewizorze. Napraw czas życia tokenów, nagłówki CORS lub dostępność hosta, zanim dodasz przycisk przesyłania.

Co zyskają programiści

Dodaj niezawodny przycisk przesyłania, nie psując reszty odtwarzacza.

Podsumowanie

Przesyłanie obrazu nie jest funkcją typu "plug-and-play" dla niestandardowych odtwarzaczy wideo; polega ono na przekazaniu odtwarzania do zupełnie innego środowiska. Zapewniając długożyjący, zatwierdzony przez CORS adres URL, unikając odniesień do blobów i nasłuchując zdarzeń połączenia telewizora, możesz dodać przycisk przesyłania, który działa niezawodnie, zamiast psuć cały odtwarzacz.