はじめに
ラウザの動作を何らかの方法で変更するために使用したりできる、さまざまなイベントが含まれています。 イベントは、プレーヤのロード時、動画の再生時（開始、進行、完了）、ユーザーがボタンと対話した時など、さまざまなタイミングで発生します。イベントに反応するには、まず、プレーヤーからのイベントを待機し、イベントが発生したときにブラウザから呼び出されるコールバック関数を指定します。
簡単な例:
<script>
var myPlayer = document.getElementById('sskyplayer');
myPlayer.addEventListener('ctaClicked', function(event) {
console.log('Viewer clicked the CTA: ' + event.detail.name);
});
</script>
プレイヤー要素は変数myPlayer に格納され、それに対して addEventListenerメソッドが呼び出されます。最初の引数は文字列で、リッスンするイベントの名前です。これは ctaClicked ですctaClicked - これは、動画のコールトゥアクション ボタンをマウスでクリックするか、指でタップすることを意味します。2 番目の引数はコールバック関数です。ここでは、ボタン名を含むイベントに関するログをコンソールに書き込みます。
注意 - 上記のサンプルでは、player 要素の作成時に定義された sskyplayer という ID を使用して、player 要素を取得しています。これは、SundaySkyのプレーヤー統合コードで使用されているidと同じ値なので、異なるidが使用されている場合は適宜修正してください。
<script>
function createPlayer() {
var sskyplayer = document.createElement('sundaysky-video');
sskyplayer.setAttribute( 'id' , 'sskyplayer' );
sskyplayer.setAttribute( 'analytics-token' , 'accountID' );
sskyplayer.setAttribute('endpoint-url','https://accountID.web.sundaysky.com/create_video_session');
sskyplayer.setAttribute('session-parameters','{ "id" : "110006" }');
sskyplayer.setAttribute( 'poster','https://play.sundaysky.com/resources/invitation.png' );
sskyplayer.addEventListener('ctaClicked', function(event) {
console.log('Viewer clicked the CTA: ' + event.detail.name);
});
document.getElementById('sskydiv').appendChild(sskyplayer);
}
createPlayer();
</script>
プレイヤーイベント
以下のリストは、一般的に使用されるイベントと、そのイベントが発生するタイミング、および使用可能な追加のイベントプロパティについての説明です。
| Event | Event Trigger |
| ctaClicked |
CTAメニューのオプションがクリックされたときに発行される。 Eventの "target "プロパティには、クリックされたボタン要素のインスタンスが格納されます。
"preventDefault()": 呼び出された場合、クリックから生じるはずのデフォルトアクション（新しいブラウザタブでURLを開く）は起動されません。 ctaClicked イベントとこのメソッドを使用して、URLを新しいウィンドウで開かないようにするアクションを実装してください。 |
| ctaHide |
CTAメニューを非表示にするときに発行されます。
このイベントは、各 CTA に対して個別に発生することに注意してください。 従来のメタデータ構造の後方互換性を保つために構造はそのままですが、新しいメタデータ構造では、各 CTA ボタンが表示される正確な時間を個別に設定することができます。 このイベントは、個々の CTA が実際に表示される瞬間を反映します。 |
| ctaShow |
CTAボタンが表示されるべき時に発行されます。
|
| ended |
動画が終了するたびに発行されます。 |
| error |
プレーヤーにエラーが発生したときに発行されます。
|
| load | すべてのソフトウェアコンポーネントのロードが完了し、プレーヤーコンポーネントが初期化されたときに発行されます。 |
| playRequested |
ユーザーが初めて "再生" をクリックしたときに発行されます。 自動再生に設定されている動画では発生しません。
|
| playStart |
動画の再生が初めて開始されたときに発行される。セッションごとに複数回発生することはありません。
|
| progress |
動画が "再生" 状態のとき、0%と100%を含めて、動画の継続時間の1%ごとに発行されるます。
|
| scene |
ビデオ内の新しいシーンの再生を開始するたびに発行されます。
|
| survey |
<sundaysky-survey>コンポーネントが接続され、アンケートが初めて提示された場合に発行されます。
|
| surveySubmit |
<sundaysky-survey>コンポーネントが接続され、アンケートが送信された場合に発行されます。
|
| Time to First Frame |
動画が初めて再生されるときに発行されます。
|
| transcript |
トランスクリプトデータが利用可能になったとき（通常、ビデオの再生が開始されたとき）に発行されます。
|
| transcriptClicked |
トランスクリプトコントロールバーボタンがクリックされたときに発行されます。イベントの "target "プロパティは、トランスクリプト要素のインスタンスを含みます。
|
| userAction |
ユーザーインタラクション（ボタンや画面上のコントロールのクリック／タップ／プレス）が発生するたびに発行されます。
|
| Video Played |
動画が初めて再生されるときに発行されます。
|
コードサンプル
- デフォルトのCTA URLをカスタムURLで上書きします:
<script>
var myPlayer = document.getElementById('sskyplayer');
myPlayer.addEventListener('ctaClicked', function(event) {
event.preventDefault();
if (event.detail.label=="<CTA name to override>")
{
window.open(“<URL To Open>”);
}
});
</script>
- 動画視聴の四分位値イベントをサードパーティのウェブ解析システムに送信します:
<script>
var myPlayer = document.getElementById('sskyplayer');
myPlayer.addEventListener('progress', function(event) {
if(event.detail.position=='0.25' || event.detail.position=='0.5' || event.detail.position=='0.75') {
SendEventToWebAnalytics(event.detail.position);
}
});
</script>
- 動画のCTAが表示されたら、ページ上のCTAを表示するようにします:
<script>
var myPlayer = document.getElementById('sskyplayer');
myPlayer.addEventListener('ctaShow', function(event) {
if (detail.ctaSpec[0].label=="<Your CTA Label>")
{
document.getElementById('<Page Element To Display>').style.visibility="visible";
}
});
</script>
