soporte Contactar con Soporte | Estadoestado del sistema del sistema
Contenido de la página

    Ejemplo de API de cliente de experiencia en página

    Este sencillo ejemplo demuestra el uso de la API de cliente de experiencia en página.

    Introducción

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

    Este ejemplo básico muestra cómo:

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

    Ejemplo de experiencia en página

     

    Pasos para crear la muestra

    1. Cree una experiencia en página con una lista de reproducción (no importa cómo se muestre la lista de reproducción).
    2. Publicar la experiencia.
    3. Copie y pegue el código de incrustar experiencia en una página HTML.
    4. Añada un id atributo a la <div> etiqueta, con el valor: customized_in_page_experience.
    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 = window.top.bcov.gal.getEmbed('customized_in_page_experience'),
          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';
          });
      
        })(window, document);
      </script>
      
    6. Establezca el componente para que aparezca Antes de reproducir, Reproducir y Después de la reproducción.
    7. Guarde los 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 «Player pausado». Tenga en cuenta que, dado que la publicación es asincrónica, puede que tenga que esperar un minuto, borrar la caché del explorador y actualizar la página para ver los cambios.