HLS-Plugin

Grundlagen des HLS-Plugins

Die folgenden Punkte helfen Ihnen, das HLS-Plugin zu verstehen und zu verwenden:

• Wie im ersten Satz dieses Dokuments erwähnt, stützt sich das Plugin auf die Media Source Extensions (MSE) von W3C. MSE ist eine W3C-Spezifikation, mit der JavaScript Byte-Streams an Mediencodecs in Webbrowsern senden kann, die HTML5-Videos unterstützen. Dies ermöglicht unter anderem die Implementierung von clientseitigem Vorabruf- und Puffercode für das vollständige Streaming von Medien in JavaScript.
• Mit dem Plugin können Sie dann HLS (m3u8) -Videoinhalte im Player verwenden. Sie können beispielsweise einen Player mit dieser Konfiguration für den Medienbereich erstellen:

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

• Cross-Origin Resource Sharing (CORS) kann bei der Verwendung von HLS ein Problem sein. Weitere Informationen zur Verwendung von CORS finden Sie in der CORS-Leitfaden.
• HLS wird in früheren IE-Versionen als IE11 nicht unterstützt.

Überblick

HTTP Live Streaming (HLS) ist dank seiner nativen Unterstützung für iOS und Android zu einem De-facto-Standard für das Streamen von Videos auf Mobilgeräten geworden. Es gibt jedoch eine Reihe plattformunabhängiger Gründe, das Format zu empfehlen:

• Unterstützt (clientgesteuerte) adaptive Bitratenauswahl
• Wird über Standard-HTTP-Ports geliefert
• Einfaches, textbasiertes Manifestformat
• Keine proprietären Streaming-Server erforderlich

Leider fehlt allen wichtigen Desktop-Browsern außer Safari die HLS-Unterstützung. Dies führt dazu, dass Webentwickler in der unglücklichen Lage sind, alternative Wiedergaben desselben Videos beizubehalten und möglicherweise vollständig auf HTML-basierte Videos verzichten zu müssen, um das beste Desktop-Anzeigeerlebnis zu erzielen.

Dieses Plugin behebt die Situation, indem es eine Polyfüllung für HLS in Browsern bereitstellt, die Media Source Extensions oder Flash-Unterstützung bieten. Sie können einen einzelnen HLS-Stream bereitstellen, Code für die regulären HTML5-Video-APIs verwenden und ein schnelles, qualitativ hochwertiges Videoerlebnis in allen großen Webgerätekategorien erstellen.

Derzeit gibt es zu diesem Zeitpunkt Nein Unterstützung für:

• Alternative Audio- und Videospuren
• Segment-Codecs außer H.264 mit AAC-Audio
• Internet Explorer <11

Optionen

Es gibt verschiedene Optionen, mit denen Sie das HLS-Plugin konfigurieren können.

withCredentials

Typ: boolean

Kann verwendet werden als:

• eine Quelloption
• eine Initialisierungsoption

Wenn der withCredentials Eigenschaft ist auf gesetzt true hätten alle XHR-Anfragen für Manifeste und Segmente withCredentials einstellen true auch. Dies ermöglicht das Speichern und Weitergeben von Cookies vom Server, auf dem die Manifeste und Segmente leben. Dies hat einige Auswirkungen auf CORS, da bei der Einstellung die Access-Control-Allow-Origin Header kann nicht auf gesetzt werden * Außerdem erfordern die Antwortheader das Hinzufügen von Access-Control-Allow-Credentials Header, der auf gesetzt ist true. Siehe die HTML5Rocks Artikel Für mehr Information.

Sie können das Plugin mithilfe der Player Management-API mithilfe einer PATCH HTTP-Methode konfigurieren, wie hier gezeigt:

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

Sie können auch die einstellen withCredentials Option auf Quellenbasis und nicht auf Spielerbasis, wie gerade gezeigt. Zum Beispiel können Sie beim Einstellen der Quelle einschließen withCredentials , wie hier gezeigt:

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

Laufzeitkonfiguration

Sie können konfigurieren withCredentials zur Laufzeit. Sie sehen unten zwei Implementierungen:

• Verwenden von player.hls.xhr.beforeRequest
• Verwenden von player.src()

Im folgenden Code verwenden Sie die player.hls.xhr.beforeRequest um eine Funktion zuzuweisen, die mit einem Objekt aufgerufen wird, das Optionen enthält, die zum Erstellen der verwendet werden xhr Anfrage. In diesem Beispiel sehen Sie nur withCredentials wird konfiguriert.

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

Sie können auch die einstellen withCredentials Optionen beim Einstellen der Videoquelle. Sie verwenden die player.src() Methode, wie hier gezeigt:

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

enableLowInitialPlaylist

Typ: boolean

Standard: undefined , außer wenn ein Browser auf einem Android-Gerät angezeigt wird; dann ist es eingestellt auf true. Sie können dieses Verhalten für Android-Geräte ändern, indem Sie den Player wie unten gezeigt mit dem Wert "patchen" false.

Kann verwendet werden als:

• eine Initialisierungsoption

Wann enableLowInitialPlaylist Wenn true festgelegt ist, wird zunächst die Wiedergabeliste mit der niedrigsten Bitrate ausgewählt. Dies hilft, die Startzeit der Wiedergabe zu verkürzen.

Sie können das Plugin mithilfe der Player Management-API mithilfe einer PATCH HTTP-Methode konfigurieren, wie hier gezeigt:

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

Laufzeit-Eigenschaften

Im Allgemeinen können Sie auf folgende Weise auf das HLS-Objekt zugreifen:

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

player.hls.playlists.master

Typ: object

Ein Objekt, das die analysierte Master-Wiedergabeliste darstellt. Wenn eine Medienwiedergabeliste direkt geladen wird, wird eine Hauptwiedergabeliste mit nur einem Eintrag erstellt.

player.hls.playlists.media

Typ: function

Eine Funktion, mit der die aktuell aktive Medienwiedergabeliste abgerufen oder geändert werden kann. Auf die Wiedergabeliste für aktive Medien wird verwiesen, wenn zusätzliche Videodaten heruntergeladen werden müssen. Wenn Sie diese Funktion ohne Argumente aufrufen, wird das analysierte Wiedergabelistenobjekt für die aktive Medienwiedergabeliste zurückgegeben. Wenn Sie diese Funktion mit einem Wiedergabelistenobjekt aus der Master-Wiedergabeliste oder einer in der Master-Wiedergabeliste angegebenen URI-Zeichenfolge aufrufen, wird die angegebene Medien-Wiedergabeliste asynchron geladen. Sobald es abgerufen wurde, wird es zur aktiven Medienwiedergabeliste.

player.hls.bandwidth

Typ: number

Die Anzahl der im letzten Segment-Download pro Sekunde heruntergeladenen Bits. Dieser Wert wird von der Standardimplementierung von verwendet selectPlaylist um eine geeignete Bitrate für die Wiedergabe auszuwählen. Bevor das erste Videosegment heruntergeladen wurde, ist es schwierig, die Bandbreite genau abzuschätzen. Die HLS-Technologie verwendet standardmäßig eine Heuristik, die auf den Downloadzeiten der Wiedergabeliste basiert, um diese Schätzung durchzuführen. Wenn Sie über eine genauere Quelle für Bandbreiteninformationen verfügen, können Sie diesen Wert überschreiben, sobald die HLS-Technologie geladen wurde, um eine erste Bandbreitenschätzung bereitzustellen.

player.hls.stats.bytesReceived

Typ: number

Die Gesamtzahl der von der HLS-Technologie heruntergeladenen Inhaltsbytes.

player.hls.selectPlaylist

Typ: function

Eine Funktion, die das Medienwiedergabelistenobjekt zurückgibt, mit dem das nächste Segment heruntergeladen werden soll. Es wird vom Plugin unmittelbar vor dem Herunterladen eines neuen Segments aufgerufen. Sie können diese Funktion überschreiben, um Ihre adaptive Streaming-Logik bereitzustellen. Sie müssen jedoch sicherstellen, dass Sie ein gültiges Objekt für die Medienwiedergabeliste zurückgeben, das in vorhanden ist player.hls.playlists.master.

Veranstaltungen

loadedmetadaten

Wird ausgelöst, nachdem die erste Medienwiedergabeliste für einen Stream heruntergeladen wurde.

geladene Wiedergabeliste

Wird sofort ausgelöst, nachdem eine neue Master- oder Medien-Wiedergabeliste heruntergeladen wurde. Standardmäßig lädt das Plugin Wiedergabelisten nur nach Bedarf herunter.

mediachange

Wird ausgelöst, wenn eine neue Wiedergabeliste zur aktiven Medienwiedergabeliste wird. Beachten Sie, dass die tatsächliche Änderung der Renderqualität nicht gleichzeitig mit diesem Ereignis auftritt. Zuerst muss ein neues Segment angefordert und der vorhandene Puffer aufgebraucht werden.

Quelle bei Fehler neu laden

Wenn Sie das HLS-Plugin verwenden, können Sie eine Methode aufrufen, die die Quelle zum aktuellen Zeitpunkt neu lädt, wenn der Player einen Fehler ausgibt. Um diese Funktion zu aktivieren, müssen Sie die reloadSourceOnError() Methode. Das folgende kurze Video zeigt die Methode in Aktion. Der gesamte im Video gezeigte Code wird später in diesem Abschnitt beschrieben.

Die Syntax für die reloadSourceOnError() Methode ist wie folgt:

reloadSourceOnError(optionsObject)

Die Wahl optionsObject hat folgende Eigenschaften:

Im Folgenden wird der in der obigen Videodemonstration verwendete Code detailliert beschrieben:

• Zeilen 1-9: Standard-In-Page-Einbettungscode mit einem Player id hinzugefügt.
• Zeile 11: Schaltfläche zum manuellen Erstellen von Fehlern.
• Zeilen 22-24: Funktion auf Knopfdruck aufgerufen, um einen Fehler auszulösen.
• Zeile 19: Erstellen Sie ein Objekt, in das Konfigurationsoptionen eingefügt werden sollen.
• Zeile 20: Erstellen Sie im Konfigurationsobjekt eine errorInterval Eigenschaft und weisen Sie ihm einen Wert zu.
• Zeile 21: Ruf den reloadSourceOnError() Methode, die das Konfigurationsobjekt als Argument übergibt.

<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>

In-Manifest WebVTT

Das HLS-Plugin unterstützt In-Manifest-WebVTT. Sie müssen nichts tun, um diese Funktion zu aktivieren, da sie im Plugin Standard ist. Videos müssen unter Berücksichtigung von In-Manifest-WebVTT aufgenommen werden. Zum Beispiel die Brightcove Dynamic Ingest API kann Videos aufnehmen und Untertitel als In-Manifest konfigurieren. Siehe die Überblick: Dynamic Ingest API für die dynamische Lieferung Dokument für weitere Details.

Der unten stehende Player spielt ein Video mit In-Manifest-WebVTT-Untertiteln ab. Sie können die Beschriftungen über das Beschriftungssymbol auswählen, wie hier gezeigt:

Nachdem Sie das Video gestartet haben, können Sie die gewünschten Untertitel auswählen.

Nur um zu sehen, da dies etwas ist, das Sie nicht selbst erstellen würden, ist hier das Manifest für das im Player oben gezeigte Video:

#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

Darin sehen Sie Verweise auf die Untertiteldatei.

Adaptives Schalten

HLS-Wiedergabeauswahl

Während der Wiedergabe wechselt der Player basierend auf einem Algorithmus zu einer höheren oder niedrigeren Wiedergabe. Eingaben für diesen Algorithmus sind:

• Verfügbare Bandbreite
• Spieler-Maße

Eine vollständige Beschreibung der Wiedergabeauswahl finden Sie in der Bestimmen, welche Wiedergabe abgespielt wird Dokument.

Auswahl der MP4-Formatvariante

Wenn Brightcove Player aus irgendeinem Grund keine HLS-Quellen wiedergeben kann, wird auf die Wiedergabe von MP4 zurückgegriffen. In diesem Fall wählt der Player beim Anzeigen eines Videos auf einem mobilen Gerät und beim Abspielen eines MP4 den MP4 mit einer Bitrate von höchstens 0,5 MB / s. Wenn Sie sich auf einem Desktop- oder Laptop-Gerät befinden, wird die MP4-Wiedergabe ausgewählt, die 3 MB / s am nächsten kommt.

In-Band-Metadaten

Brightcove Player erkennt bestimmte Arten von ID3-Tag-Informationen, die in einen HLS-Videostream eingebettet sind. Der ID3-Standard wurde ursprünglich verwendet, um Metadaten zu MP3-Audiospuren bereitzustellen. (The acronym is from IDentify MP3.) Wenn ein Stream mit eingebetteten Metadaten angetroffen wird, wird automatisch eine In-Band-Metadaten-Textspur erstellt und mit Cues gefüllt, sobald sie im Stream angetroffen werden. Ein häufiger Anwendungsfall ist, dass die ID3-Daten festlegen, wann Werbung in einem Live-Stream angezeigt werden soll.

Der ID3-Standard definiert viele Rahmentypen, aber nur die folgenden zwei UTF-8-codierten Rahmen werden Cue-Punkten zugeordnet und ihre Werte als Cue-Text festgelegt:

• WXXX - Benutzerdefinierter URL-Link-Frame
• TXXX - Benutzerdefinierter Textinformationsrahmen

Cues werden für alle anderen Rahmentypen erstellt und die Daten werden an den generierten Cue angehängt:

cue.frame.data

Weitere Informationen zu Textspuren im Allgemeinen finden Sie unter Erste Schritte mit dem Track-Element. Informationen zu Brightcove Player und Cue-Points finden Sie unter Anzeigen mit Ad Cue-Punkten anzeigen.

Debuggen

Mit den Informationen in diesem Abschnitt können Sie Informationen sammeln, die dann an den Brightcove-Support weitergeleitet werden können, um HLS-Probleme zu beheben. Davon abgesehen könnten einige der gemeldeten Daten für Sie von Interesse sein.

Es werden zwei Methoden und eine Eigenschaft beschrieben, die beim HLS-Debugging helfen.

Methode: videojs.log.level ()

Das videojs.log.level() Methode ruft die aktuelle Protokollierungsstufe ab oder legt diese fest. Um das Debuggen zu aktivieren, verwenden Sie:

videojs.log.level('debug');

Methode: videojs.log.history ()

Das history() Die Methode gibt ein Array zurück, das alles enthält, was im Verlauf protokolliert wurde.

Jede Nachricht, die über das protokolliert wird videojs.log Die API wird an die angehängt history Array. Welche Informationen in dieses Array eingefügt werden, hängt davon ab, welche Plugins verwendet werden, die die API verwenden, und vom Status des Players. Dies bedeutet, dass der Verlauf leicht Nicht-HLS-Informationen enthalten kann. Eine Beispielanzeige von der Konsole des history Array folgt:

Wenn Sie die senden müssen history Array zu unterstützen, das Beste, was Sie tun können, ist an der Konsole Folgendes einzugeben:

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

Sie erhalten ähnliche Informationen wie hier gezeigt:

Kopieren Sie den generierten JSON, der dann an den Support gesendet werden kann.

Eigenschaft: player.tech (). Hls.stats

Dieses Objekt enthält eine Zusammenfassung der HLS- und spielerbezogenen Statistiken. Die verfügbaren Eigenschaften sind in der folgenden Tabelle aufgeführt:

Eine Beispielanzeige von der Konsole des stats Objekt folgt:

Codebeispiel

Wenn Sie mit diesen Debugging-Funktionen experimentieren möchten, kann Code, der auf dem folgenden basiert, als Ausgangspunkt dienen:

<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 Bildunterschriften

Das HLS-Plugin von Brightcove unterstützt 608 Untertitel. 608 Untertitel, auch bekannt als CEA-608-Untertitel, EIA-608-Untertitel und Line 21-Untertitel, sind ein Standard für Untertitel für analoge NTSC-TV-Sendungen in den USA und Kanada. Die 608 Untertitel können in einen Live-Stream eingefügt werden, wo sie in das HLS gemischt werden. ts (Transport Stream) Dateien.

Hosting-Probleme

Fehler

Fehler während der HLS-Wiedergabe werden anhand des Typs gemeldet APPEND_BUFFER_ERR. Die Nachricht wird aus dem nativen Fehler des Browsers abgerufen. Beispielsweise, Das Kontingent wurde überschritten.

Änderungsliste

HLS ist jetzt in den Player integriert, und Änderungen an der Plugin-Funktionalität werden in den Versionshinweisen für den Brightcove-Player bekannt gegeben.

Historische Versionshinweise finden Sie im Changelog hier.