Programmgesteuertes Zuweisen eines Videos zum Player

Festlegen der Video-ID über URL

Es ist möglich, die URL-Implementierung zu verwenden und das abgespielte Video dynamisch zu ändern. Dazu verwenden Sie eine Abfragezeichenfolge am Ende der URL im Formular ?videoId=YOUR_VIDEO_ID wie im folgenden Beispiel gezeigt.

https://players.brightcove.net/..._default/index.html?videoId=2114345471001

Verwenden von Referenz-IDs

In allen Beispielen in diesem Dokument, in denen eine Video-ID verwendet wird, a Referenz ID kann ersetzt werden. Wenn Sie die Referenz-ID verwenden, müssen Sie dieser Kennung ref: voranstellen. Zum Beispiel verwendet die erste URL die Video-ID, während die zweite die Referenz-ID verwendet.

https://players.brightcove.net/..._default/index.html?videoId=2114345471001
https://players.brightcove.net/..._default/index.html?videoId=ref:1234abcd

Festlegen der Video-ID über das Tag-At

Der In-Page-Einbettungscode enthält das <video> Tag. Die Video Cloud-ID für das Video ist mit dem data-video-id HTML 5-Datenattribut verknüpft.

<video-js
  data-account="1507807800001"
  data-player="dadff0fb-5635-4eac-a1b8-ab8c37a72be9"
  data-embed="default"
  data-video-id="2114345471001"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/dadff0fb-5635-4eac-a1b8-ab8c37a72be9_default/index.min.js"></script>

Video mit JavaScript einstellen

In vielen Fällen möchten Sie, dass Benutzerinteraktionen steuern, welches Video abgespielt wird. Um dies zu erreichen, können Sie JavaScript sowie den Player-Katalog getVideo() und load() Methoden verwenden, um das gewünschte Video dynamisch abzurufen und abzuspielen.

• Zeilen 1-10: Erweiterter (In-Page-Einbetten) Code ohne Wert für das data-video-id Attribut.
• Zeilen 13 und 19: Verwenden Sie die ready() Methode, um sicherzustellen, dass der Spieler bereit ist, darauf zu reagieren.
• Zeile 14: Verknüpfen Sie den Spieler, wie this in der Funktion genannt, mit einer Variablen.
• Zeile 15,18: Verwenden Sie die getVideo() Methode des Katalogs, indem Sie die Video Cloud ID und eine Callback-Funktion als Parameter verwenden.
• Zeile 17: Verwenden Sie die load() Methode des Katalogs, um das Video zu laden und abzuspielen.

<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="rf1BTdKk6M"
  data-embed="default"
  controls=""
  data-video-id=""
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.catalog.getVideo('2114345471001', function(error, video) {
        //deal with error
        myPlayer.catalog.load(video);
      });
    });
  </script>

Video in iframe einstellen

Um das Video an einen Player anzugeben, der in einem Iframe gehostet wird, können Sie die Video-ID (oder Referenz-ID wie bereits erwähnt) über die Abfragezeichenfolge einer URL übergeben. Zum Beispiel:

  <iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
  allowfullscreen=""
  allow="encrypted-media"
  width="960" height="540"></iframe>

Sie können JavaScript auch verwenden, um die Abfragezeichenfolge für das src Attribut des Iframe zu ändern, um dem Player mitzuteilen, welches neue Video abgespielt werden soll.

• Zeilen 1-4: Der Iframe-Implementierungscode. Notieren Sie sich die Abfragezeichenfolge (Text nach dem ? Charakter) liefert die ID für das abzuspielende Video.
• Zeile 7: Definieren Sie die Funktion, die aufgerufen werden soll, wenn sich das Video ändern soll.
• Zeile 8: Verwenden Sie die getElementsByTagName() Methode von JavaScript, um das <iframe> Tag in eine Variable zu platzieren. Beachten Sie, dass die Methode ein Array aller übereinstimmenden Elemente auf der Seite zurückgibt, und da Sie das erste (und einzige) Iframe-Tag auf der Seite verwenden, können Sie das Null-Element des Arrays verwenden.
• Zeile 9: Erstellt eine Abfragezeichenfolge, die die alte ersetzt. Dies definiert das neue Video, das abgespielt werden soll.
• Zeile 10: Weist einer Variablen die src Eigenschaft des iframe Tags zu.
• Zeile 11: Extrahiert die Quelle für den Player abzüglich der alten Abfragezeichenfolge.
• Zeile 12: Erstellt den neuen Wert für die src Eigenschaft, indem die Playerquelle mit der Abfragezeichenfolgendefinition des neuen Videos kombiniert wird.
• Zeile 13: Weist die neuen Quellen-/Videoinformationen dem zu <iframe> Stichworte src Eigentum.

<iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
  allowfullscreen=""
  allow="encrypted-media"
  width="960" height="540"></iframe>

<script type="text/JavaScript">
  function changeVideo() {
    var iframeTag = document.getElementsByTagName("iframe")[0],
      newVideo = "?videoId=3742256815001",
      theSrc = iframeTag.src,
      srcWithoutVideo = theSrc.substring( 0, theSrc.indexOf( "?" ) ),
      newSrc = srcWithoutVideo + newVideo;
    iframeTag.src = newSrc;
  }
</script>