Beispiel für eine In-Page Experience Client-API

Einleitung

Die In-Page Experience-Client-API bietet eine JavaScript-Bibliothek, die der Brightcove Player-API ähnelt. Die API vereinfacht die Interaktion und Steuerung Ihrer In-Page-Erfahrung auf der Seite.

Dieses grundlegende Beispiel zeigt Ihnen, wie Sie:

1. Holen Sie sich einen Verweis auf die Erfahrung und dann auf das clientApi-Objekt, das über die Methoden verfügt.
2. Rufen Sie API-Methoden auf, um Listener für verschiedene Ereignisse einzurichten und Informationen zu dem aktuell im Player geladenen Video abzurufen.
3. Fügen Sie Informationen in HTML-Elemente ein, die Sie der Benutzeroberfläche hinzufügen.

In-Page-Erfahrungsbeispiel

Schritte zum Erstellen des Beispiels

1. Erstellen Sie eine In-Page-Erfahrung mit einer Wiedergabeliste (es spielt keine Rolle, wie die Wiedergabeliste angezeigt wird).
2. Veröffentlichen Sie das Erlebnis.
3. Kopieren Sie den Erfahrungs-Einbettungscode und fügen Sie ihn in eine HTML-Seite ein.
4. Fügen Sie eine hinzu id Attribut auf die <div> Tag mit dem Wert: customized_in_page_experience.
5. Kehren Sie zu Studio zurück und fügen Sie der Erfahrung mit dem folgenden Code eine benutzerdefinierte HTML-Komponente hinzu:

   <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. Stellen Sie die Komponente so ein, dass Vor dem Abspielen, Abspielen und Nach dem Abspielen angezeigt wird.
7. Speichern Sie Ihre Änderungen und veröffentlichen Sie die Erfahrung erneut.
8. Durchsuchen Sie Ihre Seite und Sie sollten das Feld mit den Meldungen "Aktuelles Video" und "Player angehalten" sehen. Da das Veröffentlichen asynchron ist, müssen Sie möglicherweise eine Minute warten, den Browser-Cache leeren und die Seite aktualisieren, um die Änderungen anzuzeigen.