はじめに

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

完全に見るAPIリファレンス利用可能なメソッドとイベントの詳細については。

はじめに。

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

エクスペリエンスへの参照を取得する最も簡単な方法は、そのエクスペリエンスにid（divタグ内）を付けることです。ページ内で一意である限り、は好きなものになりますが、エクスペリエンス ID 自体はスクリプトの URL にあります（上記のコードの強調表示された部分を参照）、それを使用することもできます。id

<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';
});