頁面內體驗客戶端 API 示例

介紹

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

這個基本示例向您展示瞭如何：

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

頁內體驗示例

創建示例的步驟

1. 使用播放列表創建頁內體驗（播放列表的顯示方式無關緊要）。
2. 發表經驗。
3. 將體驗嵌入代碼複製並粘貼到 HTML 頁面中。
4. 添加一個id歸於<div>標籤，其值為： customized_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. 設置組件顯示 Before Play、Playing 和 After Play。
7. 保存更改並重新發布體驗。
8. 瀏覽您的頁面，您應該會看到帶有“當前視頻”和“播放器已暫停”消息的框。請注意，由於發布是異步的，您可能需要稍等片刻，清除瀏覽器緩存並刷新頁面才能看到更改。