Ejemplo de API de cliente de experiencia en la página

Introducción

La API del cliente In-Page Experience proporciona una biblioteca de JavaScript similar a la API de Brightcove Player. La API simplifica la interacción y el control de su experiencia en la página en la página.

Esta muestra básica le muestra cómo:

1. Obtenga una referencia a la experiencia y luego al objeto clientApi, que tiene los métodos.
2. Invoque métodos de API para configurar oyentes para varios eventos y obtener información sobre el video actualmente cargado en el reproductor.
3. Inyecte información en los elementos HTML que agregue a la interfaz de usuario de la experiencia.

Ejemplo de experiencia en la página

Pasos para crear la muestra

1. Cree una experiencia en la página con una lista de reproducción (no importa cómo se muestre la lista de reproducción).
2. Publica la experiencia.
3. Copie y pegue el código de inserción de la experiencia en una página HTML.
4. Agregar un id atribuir a la <div> etiqueta, con el valor: experiencia_personalizada_en_pagina.
5. Vuelva a Studio y agregue un componente HTML personalizado a la experiencia con el siguiente código:

   <div style="padding: .5em;border: 1px #64AAB2 solid; border-radius:.5em;">
     <p>Current Video: <span id="current_video" style="color:RGB(155, 37, 86);font-weight:bold;"></span></p>
     <p>Video Paused: <span id="video_paused" style="color:RGB(155, 37, 86);font-weight:bold;"></span></p>
     </div>
     <script>
       var BCLS = ( function (window, document) {
         var experience,
         experienceApi,
         video,
         current_video = document.getElementById('current_video'),
         video_paused = document.getElementById('video_paused');
   
         
         // code may execute before the experience has fully loaded
         // to ensure you get a reference to the experience,
         // try it, and if it fails keep waiting a second and try again
         function getExperience () {
           var t;
           experience = window.top.bcov.gal.getEmbed('YOUR_ExperienceID_Here');
           if (experience) {
             experienceApi = experience.clientApi;
             // get initial video
             experienceApi.once('videoLoaded', function() {
               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';
             });
   
           } else {
             t = window.setTimeout(getExperience, 1000);
           }
         }
   
         getExperience();
     
     
     
       })(window, document);
     </script>

6. Configure el componente para que muestre Before Play, Playing y After Play.
7. Guarde sus cambios y vuelva a publicar la experiencia.
8. Navega por tu página y deberías ver el cuadro con los mensajes "Vídeo actual" y "Reproductor en pausa". Tenga en cuenta que debido a que la publicación es asincrónica, es posible que deba esperar un minuto, borrar la memoria caché del navegador y actualizar la página para ver los cambios.