サポート サポートへのお問い合わせ | システムステータス システムステータス
ページコンテンツ

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

    この簡単な例では、インページエクスペリエンスクライアント API の使用方法を示します。

    はじめに

    インページエクスペリエンスクライアント API は、Brightcove プレーヤ 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. ページを参照すると、「現在のビデオ」と「プレーヤーが一時停止中」というメッセージが表示されたボックスが表示されます。公開は非同期であるため、1 分待ってからブラウザーキャッシュをクリアし、ページを更新して変更を確認する必要があります。