Descripción general: API de cliente de experiencia en la página

Introducción

La API de cliente de experiencias en la página es una biblioteca de JavaScript que le ayuda a administrar el comportamiento de la experiencia en la página en tiempo de ejecución, de forma similar a como se utiliza la API de Brightcove Player para controlar el comportamiento del reproductor. La API está disponible en cualquier página que ejecute una o más experiencias integradas de Brightcove. Está diseñado para ayudar a terceros con la integración de experiencias Brightcove. Proporciona acceso al reproductor actual, videos e información de estado, así como a los oyentes para eventos relacionados con la reproducción.

Ver el completo Referencia de API para obtener detalles de los métodos y eventos disponibles.

Empezando.

<div data-experience="5bb2134180b4990011750f06"></div>
<script src="https://players.brightcove.net/1752604059001/experience_5bb2134180b4990011750f06/live.js"></script>

La forma más fácil de obtener una referencia a la experiencia es darle una id (en el div etiqueta). La id puede ser lo que desee siempre que sea único dentro de la página, pero dado que la identificación de la experiencia en sí está en la URL del script (vea la parte resaltada del código arriba), también puede usar eso:

<div data-experience="5bb2134180b4990011750f06" id="experience_5bb2134180b4990011750f06"></div>
<script src="https://players.brightcove.net/1752604059001/experience_5bb2134180b4990011750f06/live.js"></script>

Ahora está listo para obtener una referencia a la experiencia en JavaScript. Recuerda que la experiencia se implementa en un iframe, por lo que no puedes comunicarte fácilmente con ella desde un script de la página principal. En su lugar, debe colocar su secuencia de comandos en un bloque HTML personalizado en la propia experiencia.

var experience = window.top.bcov.gal.getEmbed('experience_5bb2134180b4990011750f06');

Una vez que tenga una referencia a la experiencia, puede invocar métodos desde la API. Tenga en cuenta que todos los métodos están en el niño clientApi objeto:

var experience = window.top.bcov.gal.getEmbed('experience_5bb2134180b4990011750f06'),
experienceApi,
video,
current_video = document.getElementById('current_video'),
video_paused = document.getElementById('video_paused');

experienceApi = experience.clientApi;

// get initial video
video = experienceApi.getCurrentVideo();
current_video.textContent = video.name;

// event listeners
experienceApi.on('videoChanged', function() {
  video = experienceApi.getCurrentVideo();
  current_video.textContent = video.name;
});

experienceApi.on('videoStarted', function() {
  video_paused.textContent = 'false';
});

experienceApi.on('videoPaused', function() {
  video_paused.textContent = 'true';
});