ページ内エクスペリエンスクライアント API サンプル

はじめに

インページエクスペリエンスクライアント API は、ブライトコーブプレーヤ 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 = 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. [再生前]、[再生前]、[再生後] が表示されるようにコンポーネントを設定します。
7. 変更を保存し、エクスペリエンスを再公開します。
8. ページを参照すると、「現在のビデオ」と「プレーヤーが一時停止中」というメッセージが表示されたボックスが表示されます。公開は非同期であるため、変更を確認するには少し待ってブラウザのキャッシュをクリアし、ページを更新する必要があります。