Titre : Ajoutez la diffusion (Casting) à votre lecteur vidéo sans le casser

Diffuser une vidéo d'un navigateur vers une TV semble simple, mais la plupart des lecteurs HTML5 personnalisés cessent de fonctionner dès qu'on essaie. Un guide récent pour développeurs répertorie quatre points de défaillance cachés — expiration du jeton, blocages CORS, hôtes inaccessibles et le piège du blob MSE — et montre exactement comment contourner chacun d'eux.

Pourquoi la diffusion perturbe les lecteurs personnalisés

Lorsque vous cliquez sur Cast, la TV n'exécute pas votre lecteur JavaScript. Elle récupère l'URL du flux que vous lui avez transmise et joue le média avec son propre firmware. Les superpositions (overlays), les pings d'analyse et la logique de débit adaptatif (adaptive bitrate) restent dans le navigateur. Si la TV ne peut pas récupérer la même URL dans les mêmes conditions, la lecture s'arrête, souvent sans erreur apparente dans la console.

Les quatre coupables habituels

  • Expiration du jeton – Un jeton de sécurité à courte durée de vie fonctionne dans un navigateur. Une TV peut maintenir ce flux pendant quatre-vingt-dix minutes. Lorsque le jeton expire, la vidéo s'arrête. Délivrez des jetons plus longs pour les sessions de diffusion.
  • Erreurs CORS – Le CORS détermine quels domaines peuvent demander une ressource. La TV est considérée comme une origine distincte ; ainsi, si votre serveur vidéo ne met en liste blanche que le domaine de la page, la requête de la TV est bloquée, même si la même URL fonctionne dans le navigateur.
  • Hôtes inaccessibles – Les environnements de développement utilisent souvent localhost, des noms d'hôtes internes ou des plages d'adresses IP privées. La TV se trouve sur un segment de réseau différent et ne peut pas résoudre ou acheminer ces adresses, ce qui entraîne des échecs silencieux.
  • Le piège MSE – Les Media Source Extensions (MSE) permettent aux navigateurs d'assembler des segments à la volée, exposant souvent la vidéo sous la forme d'une URL blob:. Des bibliothèques comme hls.js génèrent de tels blobs pour le streaming adaptatif. Les TV ne peuvent pas récupérer un blob ; elles ont besoin de l'URL réelle du manifeste (par exemple, .m3u8 ou .mpd). Remplacez la source par le véritable manifeste avant d'appeler la boîte de dialogue de diffusion.

Une checklist étape par étape

  1. Détecter la prise en charge de la diffusion – Utilisez la Remote Playback API pour Chrome ou les événements WebKit pour Safari. Cela vous indique si le navigateur peut réellement transférer la lecture.
  2. Surveiller l'état de la connexion – Ne supposez pas qu'un clic sur un bouton garantit une liaison stable. Abonnez-vous aux événements connecting, connected et disconnect de l'objet Remote Playback. Considérez la TV comme la source de vérité ; ne mettez à jour l'interface utilisateur qu'après avoir reçu l'événement connected.
  3. Passer à une URL directe à longue durée de vie – Avant d'appeler remotePlayback.prompt(), remplacez l'attribut src de l'élément vidéo par l'URL du manifeste que la TV peut récupérer. Conservez la source originale basée sur un blob pour la lecture locale, mais changez-la uniquement pour la session de diffusion.
  4. Valider avec un test minimaliste – Créez une page HTML simple avec une seule balise <video> pointant vers l'URL du manifeste, sans JavaScript, et laissez-la tourner pendant une heure. Si la vidéo s'arrête, le flux sous-jacent échouera également sur la TV. Corrigez la durée de vie des jetons, les en-têtes CORS ou l'accessibilité de l'hôte avant d'ajouter le bouton de diffusion.

Ce que les développeurs ont à y gagner

Ajoutez un bouton de diffusion fiable sans casser le reste du lecteur.

À retenir

La diffusion n'est pas une fonctionnalité "plug-and-play" pour les lecteurs vidéo personnalisés ; elle transfère la lecture à un environnement complètement différent. En fournissant une URL à longue durée de vie et approuvée par CORS, en évitant les références aux blobs et en écoutant les événements de connexion de la TV, vous pouvez ajouter un bouton de diffusion qui fonctionne de manière fiable au lieu de casser l'intégralité de votre lecteur.