Verwenden der Methoden bc() und getPlayer()

In diesem Thema erfahren Sie mehr über die bc() und getPlayer() Methoden, einschließlich der Funktion der einzelnen und Best Practices ihrer Verwendung. In diesem Dokument ist auch ein Vergleich der getPlayer() und videojs() Methoden zum Abrufen eines Verweises auf einen Brightcove-Player.

Einleitung

Eine Grundvoraussetzung für die Entwicklung mit Brightcove Player ist das Abrufen eines Verweises auf den Player. Die bewährte Methode, um dies durchzuführen, hat sich im Laufe der Lebensdauer von Brightcove Player 6.x geändert. Hier sind die Best Practices, die Sie befolgen sollten (Details zu den einzelnen Aufzählungszeichen finden Sie weiter unten in diesem Dokument):

  • Um einen Verweis auf den Player zu erhalten, wenn Sie eine Version des verwenden <video> Tag, machen Sie einen der folgenden Schritte:
    • v6.16.0 + benutze die videojs.getPlayer() Methode.
    • Vor v6.16.0 benutze die videojs() Methode.
  • Bei Verwendung der Erweitert (In-Page-Einbettung) Spielerimplementierung, die beste Vorgehensweise ist:
    • v6.11.0 + benutze die <video-js> Etikett.
    • Vor v6.11.0 benutze die <video> Etikett.
  • Wenn Sie den Player auf der Seite manuell instanziieren, verwenden Sie die bc() Methode, die einen Verweis auf den Spieler generiert.

getPlayer() versus videojs()

Wenn Sie längere Zeit mit Brightcove Player entwickelt haben, haben Sie mit ziemlicher Sicherheit Code gesehen, der dem folgenden ähnelt, um einen Verweis auf den Player zu erhalten und ihn im zu speichern myPlayer Variable:

  videojs('myPlayerID').ready(function(){
    var myPlayer = this;
  });

Wenn Sie verwenden v6.16.0 + Es ist eine sauberere Verwendung der API und eine empfohlene bewährte Methode player.getPlayer() stattdessen , wie hier gezeigt:

  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
  });
  

video-js tag versus video tag

Für Brightcove Player v6.11.0 + Es ist eine bewährte Methode <video-js> Über <video>. Die Gründe dafür sind:

  • Verwenden von <video-js> verhindert das Aufblitzen nativer Steuerelemente, die Sie mit einem bekommen können <video> Element. Ein Beispiel hierfür ist in Chrome-Versionen 67+. Chrome zeigt kurzzeitig ein defektes Videosymbol an, bis das <video> Das Tag wird in einen Brightcove-Player konvertiert. Das Symbol erscheint wie folgt:
    Chrom defekt Video-Symbol
  • In einigen Fällen, z. B. bei Verwendung von Nicht-Video Cloud-Medien, verwenden Sie <video-js> gibt dem Spieler mehr Kontrolle über den Initialisierungsprozess. Dies verhindert jegliches automatische Browserverhalten, das mit dem verbunden sein kann <video> Element.

bc() method details

Das bc() Methode wird verwendet, um einen Spieler zu einem Zeitpunkt Ihrer Wahl zu instanziieren. Das Verzögerung der Player-Instanziierung Dokument beschreibt Anwendungsfälle und Implementierungen. Das Brightcove-Spieler-Beispiel: Vertikale Lautstärkeregelung zeigt eine andere Verwendung der bc() Methode, bei der Sie die Richtung des Lautstärkereglers in vertikal ändern möchten. Dies muss erfolgen, bevor der Player instanziiert wird.

Die Syntax der Methode lautet:

  bc(id,options)

wo:

  • id:
    • Beschreibung: Videoelement- oder Videoelement-ID
    • Datentyp: Zeichenfolge | Element
    • Erforderlich: wahr
  • options:
    • Beschreibung: Optionsobjekt zum Bereitstellen von Einstellungen
    • Datentyp: Objekt
    • Erforderlich: false
  • Die Methode gibt eine Brightcove Player-Instanz zurück

Zum Beispiel könnten Sie Folgendes haben video-js Tag und dann JavaScript, um den Player zu konfigurieren:

  <video-js id="myPlayerID"
     data-embed="default"
     data-application-id=""
     controls=""
     width="640" height="360"></video-js>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  
  <script type="text/javascript">
    // +++ Define the player options +++
    var options = {
      controlBar: {
        volumePanel: {
          inline: false,
          vertical: true
        }
      }
    };
  
    // +++ Add the player attributes +++
    var myPlayerEl = document.getElementById("myPlayerID");
    myPlayerEl.setAttribute('data-account', 1752604059001);
    myPlayerEl.setAttribute('data-player', 'default');
    myPlayerEl.setAttribute('data-video-id', 5557662144001);
  
    // +++ Create the player +++
    bc(myPlayerEl, options);
  </script>

Von den normalen Player-Konfigurationsoptionen (detailliert in der Player-Konfigurationshandbuch kann das folgende mit dem verwendet werden bc() Methode:

Gültige Konfigurationsoptionen
autoplay
language
languages
loop
muted
playsinline
preload
techOrder