Retrasar la instanciación del jugador

Retraso de instanciación

Hay algunos casos de uso en los que querrá utilizar el código de implementación del reproductor avanzado (incrustación en la página), pero retrasar la creación de instancias del reproductor. Para hacer esto, debe modificar el <videos-js> atributos de la etiqueta y utilice el bc() método para inicializar el reproductor. Tenga en cuenta que el método puede tomar la ID del jugador o el elemento del jugador como argumento.

Modificar la etiqueta video-js

Al retrasar la creación de instancias del jugador, NO PUEDE usar todos los <video-js> atributos de la etiqueta, o se creará una instancia del jugador. Debe eliminar tres de los atributos del código estándar avanzado (incrustación en la página). Los atributos que deben eliminarse son:

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

Esto deja los siguientes atributos en el <video-js> etiqueta:

• data-embed
• class
• controls (optional)

La razón por la que los atributos deben eliminarse, ya que permanece cualquiera de esos tres atributos, hará que se cree una instancia de Brightcove Player.

El código avanzado utilizado debe tener un patrón en el siguiente fragmento de código. Tenga en cuenta que un id se agrega a la etiqueta.

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

Estos cambios en el código avanzado y el código JavaScript que se muestran a continuación funcionan juntos para retrasar la creación de instancias del reproductor.

JavaScript utilizado

Una práctica muy común es utilizar un código similar al siguiente para prepararse para interactuar mediante programación con el reproductor:

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

Este enfoque no se puede utilizar ya que crearía una instancia del jugador. En su lugar, usará el bc() método para crear una instancia del reproductor DESPUÉS de que se hayan establecido otras preferencias. Esto bc() El método se utiliza para crear una nueva instancia de Brightcove Player y normalmente se llama automáticamente cuando se utiliza el <video-js> etiqueta, a menos que se sigan los pasos detallados aquí.

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

No id en el jugador

Si por alguna razón no desea utilizar un id con su reproductor, puede utilizar el siguiente código para retrasar la creación de instancias.

<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 con conmutación por error de anuncios SSAI

Con la conmutación por error de anuncios activada, Brightcove Player detecta si hay un bloqueador de anuncios en el navegador. De lo contrario, se reproducen sus anuncios del lado del cliente (CSAI). Si se detecta un bloqueador de anuncios, el reproductor solicita automáticamente sus anuncios del lado del servidor (SSAI). Para obtener más detalles, consulte la SSAI: Detección de bloque de anuncios y conmutación por error automática documento.

De forma predeterminada, llamando al bc() El método obliga al reproductor a inicializarse inmediatamente. Si desea utilizar la conmutación por error de anuncios con el bc() método, debe esperar a que el reproductor verifique si hay un bloqueador de anuncios presente. Puede hacer esto con el siguiente código:

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();
});

Ejemplo

Aquí hay un código de ejemplo.

HTML

Este es el HTML del ejemplo.

<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

Este es el JavaScript del ejemplo.

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