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

    概要: ページ内エクスペリエンスクライアント API

    このトピックでは、ページ内エクスペリエンスクライアント API の概要について説明します。ページ内エクスペリエンスを作成および管理するためのプラットフォーム API をお探しの場合は、「概要」を参照してください。ページ内エクスペリエンス API

    はじめに

    インページエクスペリエンスクライアント API は、実行時にページ内エクスペリエンスの動作を管理できる JavaScript ライブラリです。これは、Brightcove Player API を使用してプレーヤーの動作を制御する方法に似ています。この API は、1 つ以上の Brightcove 埋め込みエクスペリエンスを実行する任意のページで使用できます。サードパーティがBrightcove の統合を体験できるように設計されています。再生関連のイベントのリスナーだけでなく、現在のプレーヤー、ビデオ、状態情報へのアクセスを提供します。

    使用可能なメソッドとイベントの詳細については、 API リファレンスを参照してください

    はじめに。

    <div data-experience="5bb2134180b4990011750f06"></div>
    <script src="https://players.brightcove.net/1752604059001/experience_5bb2134180b4990011750f06/live.js"></script>

    エクスペリエンスへの参照を取得する最も簡単な方法は、iddivタグに)を与えることです。は、ページ内で一意である限り、id好きなものでもかまいません。ただし、エクスペリエンス ID 自体がスクリプトの URL(上記のコードのハイライトされた部分を参照)にあるため、次のように使用できます。

    <div data-experience="5bb2134180b4990011750f06" id="experience_5bb2134180b4990011750f06"></div>
    <script src="https://players.brightcove.net/1752604059001/experience_5bb2134180b4990011750f06/live.js"></script>

    これで、JavaScript でのエクスペリエンスへの参照を取得する準備ができました。エクスペリエンスはに実装されているためiframe、親ページのスクリプトから簡単に通信することはできません。代わりに、エクスペリエンス自体のカスタム HTML ブロックにスクリプトを配置する必要があります

    var experience = window.top.bcov.gal.getEmbed('experience_5bb2134180b4990011750f06');

    エクスペリエンスへの参照を取得したら、API からメソッドを呼び出すことができます。clientApiすべてのメソッドが子オブジェクト上にあることに注意してください。

    var experience = window.top.bcov.gal.getEmbed('experience_5bb2134180b4990011750f06'),
    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';
    });