In-Page Experience Client API Sample

Product(s)
Gallery
Role(s)
API Developer
Task(s)
Create an In-Page Experience
API(s)
In-Page Experiences API (Client)

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

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