In-Page Experience Client API Sample

Introduction

The In-Page Experience client API provides a JavaScript library similar to the Brightcove Player API. The API simplifies interacting and controlling your In-Page Experience on the page.

This basic sample shows you how to:

1. Get a reference to the experience and then to the clientApi object, which has the methods.
2. Invoke API methods to set up listeners for various events and get information on the video currently loaded in the player.
3. Inject information into HTML elements you add to the experience UI.

In-Page Experience Example

Steps to create the sample

1. Create an In-Page Experience with a playlist (it does not matter how the playlist is displayed).
2. Publish the experience.
3. Copy and paste the experience embed code into an HTML page.
4. Add an id attribute to the <div> tag, with the value: customized_in_page_experience.
5. Go back to Studio and add a custom HTML component to the experience with the following code:

   <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. Set the component to display Before Play, Playing, and After Play.
7. Save your changes and re-publish the experience.
8. Browse your page, and you should see the box with "Current Video" and "Player Paused" messages. Note that because publishing is asynchronous, you may have to wait a minute, clear the browser cache, and refresh the page to see the changes.