Plugin HLS

Principes de base du plugin HLS

Les points suivants vous aident à comprendre et à utiliser le plugin HLS:

• Comme mentionné dans la phrase d'ouverture de ce document, le plugin s'appuie sur les extensions de source multimédia (MSE) du W3C. MSE est une spécification W3C qui permet à JavaScript d'envoyer des flux d'octets à des codecs multimédias dans des navigateurs Web prenant en charge la vidéo HTML5. Entre autres utilisations possibles, cela permet la mise en œuvre de code de prélecture et de mise en mémoire tampon côté client pour le streaming multimédia entièrement en JavaScript.
• Avec le plugin, vous pouvez ensuite utiliser le contenu vidéo HLS (m3u8) dans le lecteur. Par exemple, vous pouvez créer un lecteur en utilisant cette configuration pour la section multimédia:

  "media":{
      "sources": [{
          "src": "http://example.com/video.m3u8",
          "type": "application/x-mpegURL"
      }]
  }

• Le partage de ressources cross-origin (CORS) peut être un problème lors de l'utilisation de HLS. Pour plus d'informations sur l'utilisation de CORS, consultez le Guide CORS.
• HLS n'est pas pris en charge sur les versions d'IE antérieures à IE11.

Aperçu

Diffusion HTTP en direct (HLS) est devenu une norme de facto pour le streaming vidéo sur les appareils mobiles grâce à son support natif sur iOS et Android. Cependant, il existe un certain nombre de raisons indépendantes de la plate-forme pour recommander le format:

• Prise en charge de la sélection adaptative du débit binaire (pilotée par le client)
• Livré sur des ports HTTP standard
• Format manifeste simple et textuel
• Aucun serveur de streaming propriétaire n'est requis

Malheureusement, tous les principaux navigateurs de bureau, à l'exception de Safari, ne prennent pas en charge HLS. Cela laisse les développeurs Web dans la position malheureuse de devoir maintenir des rendus alternatifs de la même vidéo et potentiellement de renoncer complètement à la vidéo HTML pour offrir la meilleure expérience de visualisation de bureau.

Ce plugin résout la situation en fournissant un polyfill pour HLS sur les navigateurs qui ont des extensions de source multimédia ou un support Flash. Vous pouvez déployer un seul flux HLS, coder par rapport aux API vidéo HTML5 classiques et créer une expérience vidéo rapide et de haute qualité sur toutes les grandes catégories d'appareils Web.

Actuellement, il y a actuellement non soutien:

• Alterner les pistes audio et vidéo
• Codecs de segment autre que H.264 avec audio AAC
• Internet Explorer <11

Options

Il existe plusieurs options que vous pouvez utiliser pour configurer le plugin HLS.

withCredentials

Type: boolean

Peut être utilisé comme :

• une option source
• une option d'initialisation

Quand le withCredentials la propriété est définie sur true , toutes les demandes XHR de manifestes et de segments auraient withCredentials mis à true ainsi que. Cela permet de stocker et de transmettre des cookies à partir du serveur sur lequel les manifestes et les segments vivent. Cela a des implications sur CORS car lorsqu'il est défini, le Access-Control-Allow-Origin l'en-tête ne peut pas être défini sur * , également, les en-têtes de réponse nécessitent l'ajout de Access-Control-Allow-Credentials en-tête qui est défini sur true. Voir le L'article de HTML5Rocks pour plus d'informations.

Vous pouvez configurer le plugin à l'aide de l'API Player Management à l'aide d'une PATCH méthode HTTP, comme illustré ici :

curl \
    --header "Content-Type: application/json" \
    --user YOUR_EMAIL \
    --request PATCH \
    --data '{ "hls": { "withCredentials": true } }' \
https://players.api.brightcove.com/v2/accounts/YOUR_ACCOUNT_ID/players/YOUR_PLAYER_ID/configuration

Vous pouvez également définir le withCredentials option sur une base par source, plutôt que sur une base de joueur comme indiqué ci-dessus. Par exemple, lors de la définition de la source, vous pouvez inclure withCredentials , comme indiqué ici:

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL \
  --request POST \
  --data '{
      "name": "MySamplePlayer",
      "configuration": {
        "media": {
          "sources": [{
            "src":"http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4",
            "type":"video/mp4",
            "withCredentials": true
          }]
        }
      }
    }' \
https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players

Configuration d'exécution

Vous pouvez configurer withCredentials lors de l'exécution. Vous verrez ci-dessous deux implémentations:

• Utilisation de player.hls.xhr.beforeRequest
• Utilisation de player.src()

Dans le code suivant, vous utilisez le player.hls.xhr.beforeRequest pour affecter une fonction qui sera appelée avec un objet contenant des options qui seront utilisées pour créer le xhr demande. Dans cet exemple, vous ne voyez que withCredentials est en cours de configuration.

if (videojs.Hls) {
  videojs.Hls.xhr.beforeRequest = function (options) {
    options.withCredentials = true;
  }
}

Vous pouvez également définir le withCredentials options lors du réglage de la source vidéo. Vous utilisez le player.src() méthode, comme indiqué ici:

player.src({
  src: 'https://adomain.com/bipbop_16x9_variant.m3u8',
  type: 'application/x-mpegURL',
  withCredentials: true
});

enableLowInitialPlaylist

Type: boolean

Défaut: undefined , sauf lorsqu'un navigateur est affiché sur un appareil Android; alors il est réglé sur true. Vous pouvez modifier ce comportement pour les appareils Android en appliquant un correctif au lecteur, comme indiqué ci-dessous, avec une valeur de false.

Peut être utilisé comme :

• une option d'initialisation

Quand enableLowInitialPlaylist est défini sur true, il sera utilisé pour sélectionner initialement la liste de lecture à débit binaire le plus bas. Cela permet de réduire l'heure de début de lecture.

Vous pouvez configurer le plugin à l'aide de l'API Player Management à l'aide d'une PATCH méthode HTTP, comme illustré ici :

curl \
    --header "Content-Type: application/json" \
    --user YOUR_EMAIL \
    --request PATCH \
    --data '{ "hls": { "enableLowInitialPlaylist": true } }' \
https://players.api.brightcove.com/v2/accounts/YOUR_ACCOUNT_ID/players/YOUR_PLAYER_ID/configuration

Propriétés d'exécution

En général, vous pouvez accéder à l'objet HLS de cette manière:

• Brightcove Player v5: player.hls
• Brightcove Player v6: player.tech().hls

player.hls.playlists.master

Type: object

Un objet représentant la liste de lecture principale analysée. Si une liste de lecture multimédia est chargée directement, une liste de lecture principale avec une seule entrée sera créée.

player.hls.playlists.media

Type: function

Une fonction qui peut être utilisée pour récupérer ou modifier la liste de lecture multimédia actuellement active. La liste de lecture multimédia active est désignée lorsque des données vidéo supplémentaires doivent être téléchargées. L'appel de cette fonction sans argument renvoie l'objet de playlist analysé pour la playlist multimédia active. L'appel de cette fonction avec un objet playlist de la playlist principale ou une chaîne URI comme spécifié dans la playlist principale lancera un chargement asynchrone de la playlist multimédia spécifiée. Une fois récupéré, il deviendra la liste de lecture multimédia active.

player.hls.bandwidth

Type: number

Le nombre de bits téléchargés par seconde lors du dernier téléchargement de segment. Cette valeur est utilisée par l'implémentation par défaut de selectPlaylist pour sélectionner un débit binaire approprié à lire. Avant que le premier segment vidéo ne soit téléchargé, il est difficile d'estimer la bande passante avec précision. La technologie HLS utilise une heuristique basée sur les temps de téléchargement de la playlist pour effectuer cette estimation par défaut. Si vous disposez d'une source d'informations plus précise sur la bande passante, vous pouvez remplacer cette valeur dès que la technologie HLS est chargée pour fournir une estimation initiale de la bande passante.

player.hls.stats.bytesReceived

Type: number

Le nombre total d'octets de contenu téléchargés par la technologie HLS.

player.hls.selectPlaylist

Type: function

Une fonction qui renvoie l'objet de la playlist multimédia à utiliser pour télécharger le segment suivant. Il est appelé par le plugin juste avant le téléchargement d'un nouveau segment. Vous pouvez remplacer cette fonction pour fournir votre logique de diffusion adaptative. Vous devez cependant vous assurer de renvoyer un objet de playlist multimédia valide présent dans player.hls.playlists.master.

Evénements

métadonnées chargées

Lancé après le téléchargement de la première liste de lecture multimédia pour un flux.

liste de lecture chargée

Lancé immédiatement après le téléchargement d'une nouvelle liste de lecture principale ou multimédia. Par défaut, le plugin télécharge uniquement les listes de lecture au fur et à mesure qu'elles sont nécessaires.

mediachange

Déclenché lorsqu'une nouvelle liste de lecture devient la liste de lecture multimédia active. Notez que le changement de qualité de rendu réel ne se produit pas simultanément avec cet événement; un nouveau segment doit être demandé et le tampon existant épuisé en premier.

Recharger la source en cas d'erreur

Lorsque vous utilisez le plugin HLS, vous pouvez appeler une méthode qui rechargera la source à son heure actuelle lorsqu'une erreur est émise par le lecteur. Pour activer cette fonction, vous devez appeler le reloadSourceOnError() méthode. La courte vidéo suivante montre la méthode en action. Tout le code affiché dans la vidéo est décrit plus loin dans cette section.

La syntaxe du reloadSourceOnError() La méthode est la suivante:

reloadSourceOnError(optionsObject)

L'option optionsObject a les propriétés suivantes:

Ce qui suit détaille le code utilisé dans la démonstration vidéo ci-dessus:

• Lignes 1-9: Code d'intégration standard sur la page avec un lecteur id ajoutée.
• Ligne 11 : Bouton pour créer manuellement des erreurs.
• Lignes 22-24: Fonction appelée en cliquant sur le bouton pour envoyer une erreur.
• Ligne 19 : Créez un objet dans lequel placer les options de configuration.
• Ligne 20 : Dans l'objet de configuration, créez un errorInterval property et attribuez-lui une valeur.
• Ligne 21: Appeler le reloadSourceOnError() méthode, en passant l'objet de configuration comme argument.

<video-js id="myPlayerID"
  data-video-id="4607746980001"
  data-account="1507807800001"
  data-player="HJLp3Hvmg"
  data-embed="default"
  data-application-id=""
  controls=""
></video-js>

<p><button onclick="createError()">createError</button></p>

<script src="https://players.brightcove.net/1507807800001/HJLp3Hvmg_default/index.min.js"></script>

<script type="text/javascript">
  var createError;
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
      reloadOptions = {};
    reloadOptions.errorInterval = 10;
    myPlayer.reloadSourceOnError(reloadOptions);
    createError = function(){
      myPlayer.error({code:'2'});
    }
  });
</script>

WebVTT via manifeste

Le plug-in HLS prend en charge WebVTT dans le manifeste. Il n'y a rien à faire pour activer cette fonctionnalité car elle est standard dans le plugin. Les vidéos doivent être intégrées à WebVTT dans le manifeste. Par exemple, le Brightcove Dynamic Ingest API peut ingérer des vidéos et configurer des sous-titres comme in-manifest Voir le Aperçu: Dynamic Ingest API pour la livraison dynamique document pour plus de détails.

Le lecteur ci-dessous lit une vidéo avec des légendes WebVTT dans le manifeste. Vous pouvez sélectionner les légendes via l'icône des légendes, comme indiqué ici:

Après avoir démarré la vidéo, vous pourrez choisir les légendes que vous souhaitez voir.

Simplement pour voir, comme c'est quelque chose que vous ne construiriez pas vous-même, voici le manifeste de la vidéo affichée dans le lecteur ci-dessus:

#EXTM3U
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Woofer",DEFAULT=NO,AUTOSELECT=YES,FORCED=NO,LANGUAGE="en",URI="subtitles/en/index.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Woofer (Forced)",DEFAULT=NO,AUTOSELECT=NO,FORCED=YES,LANGUAGE="en",URI="subtitles/en_forced/index.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Spanish",DEFAULT=NO,AUTOSELECT=YES,FORCED=NO,LANGUAGE="es",URI="subtitles/es/index.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="Spanish (Forced)",DEFAULT=NO,AUTOSELECT=NO,FORCED=YES,LANGUAGE="es",URI="subtitles/es_forced/index.m3u8"
#EXT-X-STREAM-INF:BANDWIDTH=865000,CODECS="mp4a.40.2, avc1.42001e",RESOLUTION=640x360,SUBTITLES="subs"
865/prog_index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=12140000,CODECS="mp4a.40.2, avc1.42001e",RESOLUTION=1280x720,SUBTITLES="subs"
12140/prog_index.m3u8

Vous pouvez y voir des références au fichier de légendes.

Commutation adaptative

Sélection de rendu HLS

Pendant la lecture, le lecteur passera à un rendu supérieur ou inférieur basé sur un algorithme. Les entrées de cet algorithme sont les suivantes :

• Bande passante disponible
• Dimensions du joueur

Pour une discussion complète sur la sélection des rendus, veuillez consulter le Déterminer quel rendu jouera document.

Sélection du rendu MP4

Si, pour une raison quelconque, Brightcove Player ne peut pas lire les sources HLS, il reviendra à la lecture de MP4. Dans ce cas, si vous regardez une vidéo sur un appareil mobile et lisez un MP4, le joueur choisira le MP4 qui a un débit binaire le plus proche de 0,5 Mo / s. Si sur un ordinateur de bureau ou un ordinateur portable, il choisira le rendu MP4 le plus proche de 3 Mo / s.

Métadonnées en bande

Brightcove Player reconnaîtra certains types d'informations de balise ID3 intégrées dans un flux vidéo HLS. La norme ID3 était à l'origine utilisée pour fournir des métadonnées sur les pistes audio MP3. (L'acronyme est de IDentify MP3.) Lorsqu'un flux est rencontré avec des métadonnées incorporées, une piste de texte de métadonnées intrabande est automatiquement créée et remplie avec des indices à mesure qu'ils sont rencontrés dans le flux. Un cas d'utilisation courant est que les données ID3 indiqueraient le moment où les publicités devraient être diffusées dans un flux en direct.

La norme ID3 définit de nombreux types de trames, mais seules les deux images encodées en UTF-8 suivantes seront mappées aux points de repère et leurs valeurs définies comme texte de repère:

• WXXX - Cadre de lien URL défini par l'utilisateur
• TXXX - Cadre d'informations textuelles défini par l'utilisateur

Les repères sont créés pour tous les autres types d'images et les données sont attachées au repère généré:

cue.frame.data

Pour plus d'informations sur les pistes de texte en général, voir Premiers pas avec l'élément Track. Pour plus d'informations sur Brightcove Player et les points de repère, voir Affichage d'annonces à l'aide de points de repère publicitaire.

Débogage

Les informations de cette section sont fournies pour vous permettre de collecter des informations qui peuvent ensuite être transmises au support Brightcove pour vous aider à résoudre les problèmes HLS. Cela étant dit, certaines des données rapportées pourraient vous intéresser.

Deux méthodes et une propriété seront détaillées pour aider au débogage HLS.

Méthode: videojs.log.level ()

le videojs.log.level() La méthode obtient ou définit le niveau de journalisation actuel. Pour activer le débogage, utilisez:

videojs.log.level('debug');

Méthode: videojs.log.history ()

le history() La méthode renvoie un tableau contenant tout ce qui a été enregistré dans l'historique.

Tout message enregistré via le videojs.log L'API sera ajoutée à la history tableau. Les informations placées dans ce tableau dépendent des plugins utilisés qui utilisent l'API et de l'état du lecteur. Cela signifie que l'historique peut facilement contenir des informations non HLS. Un exemple d'affichage de la console du history tableau suit:

Si vous devez envoyer le history array à prendre en charge, la meilleure chose à faire est de taper sur la console ce qui suit:

JSON.stringify(videojs.log.history())

Vous obtiendrez des informations similaires à celles présentées ici:

Copiez le JSON qui est généré et qui peut ensuite être envoyé au support.

Propriété: player.tech (). Hls.stats

Cet objet contient un résumé du HLS et des statistiques relatives aux joueurs. Les propriétés disponibles sont présentées dans le tableau suivant:

Un exemple d'affichage de la console du stats l'objet suit:

Exemple de code

Si vous souhaitez expérimenter ces fonctionnalités de débogage, un code basé sur les éléments suivants peut servir de point de départ:

<video-js id="myPlayerID" data-video-id="5622718636001"
  data-account="1507807800001"
  data-player="SkxERgnQM"
  data-embed="default"
  data-application-id=""
  controls=""
  width="640"
  height="360"></video-js>
<script src="https://players.brightcove.net/1507807800001/SkxERgnQM_default/index.min.js"></script>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;

    videojs.log.level('debug');

    myPlayer.on('ended', function(){
      console.log('videojs.log.history(): ', videojs.log.history());
      console.log('videojs.log.level(): ', videojs.log.level());
      console.log('videojs.hls.stats: ', player.tech().hls.stats);
    });
  });
</script>

608 légendes

Le plugin HLS de Brightcove prend en charge 608 sous-titres. Les sous-titres 608, également appelés sous-titres CEA-608, sous-titres EIA-608 et sous-titres de ligne 21, sont une norme de sous-titrage codé pour les émissions analogiques de télévision NTSC aux États-Unis et au Canada. Les sous-titres 608 peuvent être insérés dans un flux en direct où ils sont mélangés dans le HLS ' ts (flux de transport) fichiers.

Problèmes d'hébergement

Erreurs

Les erreurs pendant la lecture HLS seront signalées en utilisant le type APPEND_BUFFER_ERR. Le message sera ce qui est récupéré de l'erreur native du navigateur. Par exemple, Le quota a été dépassé.

Changelog

HLS est désormais intégré au lecteur et les modifications apportées à la fonctionnalité du plugin seront signalées dans les notes de mise à jour du lecteur Brightcove.

Pour les notes de version historiques, voir le changelog ici.