Contacta con el soporte | Estado del sistema
Contenido de la página

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

    This simple example demonstrates the use of the In-Page Experience Client API.

    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. Publicar 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 = 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. 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.

    Página actualizada por última vez el 04 Jan 2022