Verzögerung der Player-Instanziierung

Instanziierung verzögern

Es gibt einige Anwendungsfälle, in denen Sie den Implementierungscode für den erweiterten Player (in die Seite einbetten) verwenden möchten, die Instanziierung des Players jedoch verzögern möchten. Dazu müssen Sie die ändern <videos-js> Tags Attribute und verwenden Sie die bc() Methode zum Initialisieren des Players. Beachten Sie, dass die Methode entweder die Spieler-ID oder das Spielerelement selbst als Argument verwenden kann.

Ändern Sie das Video-JS-Tag

Wenn Sie die Instanziierung des Players verzögern, können Sie NICHT alle verwenden <video-js> Tags Attribute, oder der Spieler wird instanziiert. Sie müssen drei der Attribute aus dem erweiterten Standardcode (Einbetten in die Seite) entfernen. Die Attribute, die entfernt werden müssen, sind:

• data-account
• data-player
• data-video-id

Dadurch bleiben die folgenden Attribute in der <video-js> Etikett:

• data-embed
• class
• controls (optional)

Der Grund, warum die Attribute entfernt werden müssen, da eines dieser drei Attribute erhalten bleibt, führt dazu, dass Brightcove Player instanziiert wird.

Der verwendete erweiterte Code sollte auf dem folgenden Codeausschnitt gemustert sein. Beachten Sie, dass ein id wird dem Tag hinzugefügt.

<video-js id="myPlayerID"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/5e28670f-28ce-4ed6-8809-227784965834_default/index.min.js"></script>

Diese Änderungen am erweiterten Code und am JavaScript-Code, die unten gezeigt werden, wirken zusammen, um die Instanziierung des Players zu verzögern.

JavaScript verwendet

Es ist sehr üblich, Code zu verwenden, der dem folgenden ähnelt, um sich auf die programmgesteuerte Interaktion mit dem Player vorzubereiten:

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

Dieser Ansatz kann nicht verwendet werden, da er den Spieler instanziieren würde. Stattdessen verwenden Sie die bc() Methode zum Instanziieren des Players, nachdem andere Einstellungen vorgenommen wurden. Diese bc() Die Methode wird zum Erstellen einer neuen Instanz von Brightcove Player verwendet und normalerweise bei Verwendung von automatisch aufgerufen <video-js> Tag, es sei denn, die hier beschriebenen Schritte werden befolgt.

<script type="text/javascript">
  var myPlayer,
    vTag = document.getElementById('myPlayerID');
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');
  vTag.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>

<script type="text/javascript">
  var myPlayer,
    vTag = document.getElementById('myPlayerID');
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.muted(true);
  myPlayer.play();
</script> 

Nein id auf dem Spieler

Wenn Sie aus irgendeinem Grund keine verwenden möchten id Mit Ihrem Player können Sie den folgenden Code verwenden, um die Instanziierung zu verzögern.

<script type="text/javascript">
  // Retrieve the element by tag name, returns an array so use the zeroth array element
  var myPlayer,
    vTag = document.getElementsByTagName('video-js')[0];

  // Assign the needed attributes
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');
  vTag.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>

<script type="text/javascript">
  // Retrieve the element by tag name, returns an array so use the zeroth array element
  var myPlayer,
    vTag = document.getElementsByTagName('video-js')[0];

  // Assign the needed attributes
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc('vTag');

  myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.muted(true);
  myPlayer.play();
</script> 

CSAI mit SSAI-Anzeigenfailover

Bei aktiviertem Anzeigenfailover erkennt der Brightcove Player, ob im Browser ein Werbeblocker vorhanden ist. Wenn nicht, werden Ihre clientseitigen Anzeigen (CSAI) abgespielt. Wenn ein Werbeblocker erkannt wird, fordert der Player automatisch Ihre serverseitigen Anzeigen (SSAI) an. Einzelheiten finden Sie in der SSAI: Erkennung von Anzeigenblöcken und automatisches Failover Dokument.

Standardmäßig wird die aufgerufen bc() Methode zwingt den Spieler, sofort zu initialisieren. Wenn Sie Ad Failover mit dem verwenden möchten bc() Methode müssen Sie warten, bis der Player überprüft, ob ein Werbeblocker vorhanden ist. Sie können dies mit dem folgenden Code tun:

bc.usingAdBlocker().then(function() {
  // The promise callback receives a true/false result, which is stored
  // internally, so future bc() calls will use it. There is no need to
  // handle it yourself.
  //
  // You can pass custom arguments to bc, as normal, if needed.
  bc();
});

Beispiel

Hier ist ein Beispielcode.

HTML

Dies ist der HTML-Code für das Beispiel.

<video-js id="myPlayerID"
	data-embed="default"
	data-application-id=""	
	controls=""
	width="640"
	height="360"></video-js>
<script src="//players.brightcove.net/1752604059001/W6RmT8TVL_default/index.min.js"></script>

JavaScript

Dies ist das JavaScript für das Beispiel.

<script type="text/javascript">
  // +++ Define the player options +++
  var options = {
    controlBar: {
      volumePanel: {
        inline: false,
        vertical: true
      }
    }
  };

  // +++ Add the player attributes +++
  var myPlayer,
		myPlayerEl = document.getElementById("myPlayerID");
  myPlayerEl.setAttribute('data-account', 1752604059001);
  myPlayerEl.setAttribute('data-player', 'W6RmT8TVL');
  myPlayerEl.setAttribute('data-video-id', 5802784116001);

  // +++ Create the player +++
  bc.usingAdBlocker().then(function() {
    myPlayer = bc(myPlayerEl, options);

    // +++ Optionally, mute and start playback +++
    myPlayer.on('loadedmetadata',function(){
      myPlayer.muted(true);
      myPlayer.play();
    });
  });
</script>