Asignar un video al reproductor mediante programación

En este tema, aprenderá cómo cambiar dinámicamente el video en el reproductor. Para hacer esto, cambiará programáticamente las instancias del reproductor. Este documento muestra varios enfoques para cambiar el video en el reproductor.

Establecer ID de video a través de URL

Es posible utilizar la implementación de URL y cambiar dinámicamente el video que se reproduce. Para hacer esto, usa una cadena de consulta al final de la URL en el formulario ?videoId=YOUR_VIDEO_ID como se muestra en el siguiente ejemplo.

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

Usar ID de referencia

En todos los ejemplos de este documento en los que se utiliza una identificación de video, Identificación de referencia puede ser sustituido. Si usa el ID de referencia, debe anteponer ese identificador con árbitro:. Por ejemplo, la primera URL usa la identificación de video, mientras que la segunda usa la identificación de referencia.

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

Establecer ID de video a través del atributo de etiqueta

El código de inserción in-page contiene el <video> etiqueta. El ID de Video Cloud para el video está asociado con el data-video-id HTML 5 datos atributo.

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

Configurar video usando JavaScript

En muchos casos, desea que las interacciones del usuario controlen qué video se reproduce. Para lograr esto, puede utilizar JavaScript y el catálogo de reproductores getVideo() y load() métodos para recuperar y reproducir dinámicamente el video deseado.

  • Líneas 1-10: Código avanzado (incrustación en la página) sin valor para el data-video-id atributo.
  • Líneas 13,19: Utilizar el ready() método para asegurarse de que el jugador esté listo para actuar.
  • Línea 14: Asociar al jugador, denominado this en la función, con una variable.
  • Línea 15,18: Utilice el catálogo getVideo() utilizando el ID de Video Cloud y una función de devolución de llamada como parámetros.
  • Línea 17: Utilice el catálogo load() método para cargar el video y reproducirlo.
<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>

Establecer video en iframe

Para especificar el video a un reproductor alojado en un iframe, puede pasar la identificación del video (o la identificación de referencia como se mencionó anteriormente) a través de una cadena de consulta de URL. Por ejemplo:

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

También puede usar JavaScript para cambiar la cadena de consulta para el iframe src atributo para decirle al jugador qué nuevo video reproducir.

  • Líneas 1-4: El código de implementación del iframe. Tenga en cuenta la cadena de consulta (texto después de la ? carácter) proporciona la identificación del video que se va a reproducir.
  • Línea 7: Defina la función que se llamará cuando el video deba cambiar.
  • Línea 8: Utilice JavaScript getElementsByTagName() método para colocar el <iframe> etiqueta en una variable. Tenga en cuenta que el método devuelve una matriz de todos los elementos coincidentes en la página y, dado que está utilizando la primera (y única) etiqueta iframe en la página, puede usar el elemento cero de la matriz.
  • Línea 9: Crea una cadena de consulta que reemplazará a la anterior. Esto define el nuevo video que se reproducirá.
  • Línea 10: Asigna a una variable el src propiedad de la iframe etiqueta.
  • Línea 11: Extrae la fuente del reproductor, menos la cadena de consulta anterior.
  • Línea 12: Crea el nuevo valor para el src propiedad combinando la fuente del reproductor con la definición de la cadena de consulta del nuevo video.
  • Línea 13: Asigna la nueva información de fuente / video al <iframe> etiqueta src propiedad.
<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>