頁面內體驗用戶端 API 範例

簡介

頁內體驗客戶端API提供了類似於Brightcove Player API的JavaScript庫。該API簡化了頁面上的頁面內體驗的交互和控制。

此基本示例向您展示如何：

1. 獲取對體驗的引用，然後獲取具有方法的clientApi對象。
2. 調用API方法為各種事件設置偵聽器，並獲取有關當前加載到播放器中的視頻的信息。
3. 將信息注入添加到體驗UI的HTML元素中。

頁內體驗示例

創建樣本的步驟

1. 使用播放列表創建頁內體驗（播放列表的顯示方式無關緊要）。
2. 發布經驗。
3. 將體驗嵌入代碼複製並粘貼到HTML頁面中。
4. 添加一個id歸因於<div>標籤，其值： custom_in_page_experience。
5. 返回Studio並使用以下代碼將自定義HTML組件添加到體驗中：

   <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. 將組件設置為顯示“播放前”，“播放中”和“播放後”。
7. 保存您的更改並重新發布體驗。
8. 瀏覽頁面，您應該會看到帶有“當前視頻”和“播放器暫停”消息的框。請注意，由於發布是異步的，因此您可能需要等待一分鐘，清除瀏覽器緩存，然後刷新頁面以查看更改。