ステップ 3: 動画イベントをリッスンする

動画が特定の動作をした際にクリエイティブがどのように機能するか制御することができます。たとえば、動画が終了したときにアニメーションを追加できます。そのためには、動画イベントをリッスンする必要があります。詳細については、HTML5 Event Attributes の Media Events セクションをご覧ください。

動画が終了した後にアニメーションを追加する

HTML5 動画の ended イベントを使用して、いつ動画が終了したのかを判断し、アニメーションの再生を開始します。

コード

video1.addEventListener('ended', videoEndHandler, false);

function videoEndHandler(e) {
// 動画が終了、アニメーションの再生を開始
}

動画の再生と一時停止がいつ行われたのかを検知する

HTML5 動画の play イベントと pause イベントを使用して、動画の再生と一時停止がいつ行われたのかを判断します。

コード

video1.addEventListener('play', videoPausePlayHandler, false);
video1.addEventListener('pause', videoPausePlayHandler, false);

function videoPausePlayHandler(e) {
if (e.type == 'play') {
// 動画が再生された、動作を実行
} else if (e.type == 'pause') {
// 動画が一時停止された、動作を実行
}
}