videoタグに使えるイベントハンドラのまとめ

動画のロードが開始されたとき(loadstart)

netWorkState属性の値がNETWORK_LOADINGになったときと同じタイミングで発火します。ページにアクセスして一度だけ発火するイベントです。

loadstartイベント

var video = document.querySelector('video');

video.onloadstart = function(){
alert('ロードが開始されました');
}

video.addEventListener('loadstart', function(){
console.log('addEventListenerによるイベント発火');
});


動画のロード中であるとき(progress)

netWorkState属性の値がNETWORK_LOADINGであるときと同じタイミングで発火します。ロードしたところまで薄い色が着いていく仕様を見ますが、これが動いているときに発火します。

progressイベント

var video = document.querySelector('video');

video.onprogress = function(){
alert('動画のロード中です');
}

video.addEventListener('progress', function(){
console.log('addEventListenerによるイベント発火');
});


動画のロード中であるとき(suspend)

netWorkState属性の値がNETWORK_IDLEであるときと同じタイミングで発火します。

suspendイベント

var video = document.querySelector('video');

video.onsuspend = function(){
alert('動画のロード中です');
}

video.addEventListener('suspend', function(){
console.log('addEventListenerによるイベント発火');
});


動画が空になったとき(emptied)

load()によって動画が初期化されたときに発火します。netWorkState属性の値がNETWORK_EMPTYであるときに発火します。

emptiedイベント

再ロード

var video = document.querySelector('video');

document.querySelector('button').onclick = function(){
video.load();
}

video.onemptied = function(){
alert('動画が空の状態です');
}

video.addEventListener('emptied', function(){
console.log('addEventListenerによるイベント発火');
});


動画が再生できなくなったとき(stalled)

netWorkState属性の値がNETWORK_LOADINGであるときに、何らかの理由で動画情報が取得できなくなったときに発火します。

stalledイベント

var video = document.querySelector('video');

video.onstalled = function(){
alert('動画が空の状態です');
}

video.addEventListener('stalled', function(){
console.log('addEventListenerによるイベント発火');
});


動画のメタ情報のロードが完了したとき(loadedmetadata)

動画の長さやサイズの読み込みが完了したときに発火します。readyState属性の値がHAVE_METADATAになったときと同じタイミングで発火します。

loadedmetadataイベント

var video = document.querySelector('video');

video.onloadedmetadata = function(){
alert('メタ情報の読み込みが完了しました');
}

video.addEventListener('loadedmetadata', function(){
console.log('addEventListenerによるイベント発火');
});


現在の動画のロードが完了したとき(loadeddata)

readyState属性の値がHAVE_CURRENT_DATAになったときと同じタイミングで発火します。

loadeddataイベント

var video = document.querySelector('video');

video.onloadeddata = function(){
alert('動画のロードが完了しました');
}

video.addEventListener('loadeddata', function(){
console.log('addEventListenerによるイベント発火');
});


動画の再生準備ができたとき(canplay)

readyState属性の値がHAVE_FUTURE_DATAになったときと同じタイミングで発火します。

canplayイベント

var video = document.querySelector('video');

video.oncanplay = function(){
alert('動画のロードが完了しました');
}

video.addEventListener('canplay', function(){
console.log('addEventListenerによるイベント発火');
});


動画の再生準備ができたとき(canplaythrough)

readyState属性の値がHAVE_ENOUGH_DATAになったときと同じタイミングで発火します。

canplaythroughイベント

var video = document.querySelector('video');

video.oncanplaythrough = function(){
alert('動画のロードが完了しました');
}

video.addEventListener('canplaythrough', function(){
console.log('addEventListenerによるイベント発火');
});


動画を再生中のとき(playing)

動画が再生されているときに発火するイベントです。

playingイベント

var video = document.querySelector('video');

video.onplaying = function(){
document.querySelector('span').innerText = '再生中';
}

video.onpause = function(){
document.querySelector('span').innerText = '一時停止中';
}

video.addEventListener('playing', function(){
console.log('addEventListenerによるイベント発火');
});


動画のロード待ちをしているとき(waiting)

動画のロードが遅く、再生していた動画が途中で止まってしまったときに発火するイベントです。

waitingイベント

var video = document.querySelector('video');

video.onwaiting = function(){
document.querySelector('span').innerText = '動画を読み込んでいます';
}

video.addEventListener('waiting', function(){
console.log('addEventListenerによるイベント発火');
});


シークポインタを動かしているとき(seeking)

動画の再生位置を示すポインタを動かすと発火するイベントです。

seekingイベントシークポインタを動かしてください

var video = document.querySelector('video');

video.onseeking = function(){
document.querySelector('span').innerText = 'シークポインタを動かしています';
}

video.addEventListener('seeking', function(){
console.log('addEventListenerによるイベント発火');
});


動かしていたシークポインタを離したとき(seeked)

動画の再生位置を示すポインタを動かした後に離すと発火するイベントです。

seekedイベントシークポインタを動かしてください

var video = document.querySelector('video');

video.onseeked = function(){
document.querySelector('span').innerText = 'シークポインタを離しました';
}

video.addEventListener('seeked', function(){
console.log('addEventListenerによるイベント発火');
});


動画が最後まで再生されたとき(ended)

動画が最後まで再生されたときに発火するイベントです。途中を飛ばしても最後のフレームが再生されれば発火します。

seekedイベント

var video = document.querySelector('video');

video.onended = function(){
alert('最後まで再生されました');
}

video.addEventListener('ended', function(){
console.log('addEventListenerによるイベント発火');
});


動画の長さが変化したとき(durationchange)

このイベントは、主に動的に別の動画を読み込むときに使われます。

durationchangeイベント

var video = document.querySelector('video');

document.querySelector('button').onclick = function(){
video.src = 'http://paradise.antytle.com/2015/video-element/trip-with-dogs.mp4';
video.load();
}

video.ondurationchange = function(){
alert('動画の長さが変わりました');
}

video.addEventListener('durationchange', function(){
console.log('addEventListenerによるイベント発火');
});


サンプルではページにアクセスした時点で一度アラートが表示されますが、これは動画を読み込む前(0秒)と読み込んだ後で再生時間が変わっているということになります。

動画の再生位置(時間)が変化したとき(timeupdate)

このイベントは、主に動的に別の動画を読み込むときに使われます。

timeupdateイベント:再生してください

var video = document.querySelector('video');

video.ontimeupdate = function(){
document.querySelector('span').innerText = '動画の再生位置(時間)が変化しています。';
}

video.addEventListener('timeupdate', function(){
console.log('addEventListenerによるイベント発火');
});


動画の再生が開始されたとき(play)

playイベント:再生してください

var video = document.querySelector('video');

video.onplay = function(){
document.querySelector('span').innerText = '動画の再生が開始されました';
}

video.addEventListener('play', function(){
console.log('addEventListenerによるイベント発火');
});


動画が一時停止されたとき(pause)

pauseイベント:一時停止してください

var video = document.querySelector('video');

video.onpause = function(){
document.querySelector('span').innerText = '動画の再生が開始されました';
}

video.addEventListener('pause', function(){
console.log('addEventListenerによるイベント発火');
});


動画の再生速度が変化したとき(ratechange)

playbackRate属性またはdefaultPlaybackRate属性の値が変化したときに発火するイベントです。

ratechangeイベント:

var video = document.querySelector('video');

document.querySelector('button').onclick = function(){
video.playbackRate = 0.5;
}

video.onratechange = function(){
document.querySelector('span').innerText = '動画の再生速度が変更されました';
}

video.addEventListener('ratechange', function(){
console.log('addEventListenerによるイベント発火');
});


音量が変化したとき(volumechange)

volumechangeイベント:音量を変更してください

var video = document.querySelector('video');

video.onvolumechange = function(){
document.querySelector('span').innerText = '音量が変化しました';
}

video.addEventListener('volumechange', function(){
console.log('addEventListenerによるイベント発火');
});


参考

執筆者

AnTytle

当サイトの管理人です。YouTube活動もしており、ゲームがとにかく大好きです!皆さんには様々な形でゲームの面白さを伝えたいと思っています。