video要素の操作に関する情報(イベント)を得る

video要素には操作に関する次のイベントを得ることができます。

イベント名 説明
progress 動画を読み込んでいる最中のとき常に発火。
読み込んでいる最中は常に発火。
初回の読み込みやバッファ中に発火するが、canplayイベントの後に1度発火する場合もある。
suspend 動画が読み込み中であるときに発火。
durationchangeイベントの直前に1度発火する。
durationchange 最大再生時間が変更されたときに発火。
loadedmetadataイベントの直前に発火。
loadedmetadata メタ情報の読み込みが完了したときに発火。
loadeddata 動画の読み込みが完了したときに発火。
canplay 再生の準備が完了したときに発火。
初回の読み込みが完了したときに発火するが、currentTimeプロパティの変更が完了した後にも発火する。
playing 再生を開始したときに発火。
pause 再生を一時停止したときに発火。
ended 再生が終了したときに発火。
seeking currentTimeプロパティの値を変更したときに発火。
再生中など自動的に更新されるときは発火しない。
timeupdate 再生時間が更新されているときに発火。
再生中は常に発火する。
volumechange 音量が変更されたときに発火。
ratechange 再生速度が変更されたときに発火。
waiting 再生中に動画の読み込みが遅く、途中で停止してしまったときに発火。
動画の読み込みに失敗して再生しようとしてもできないときにも発火する。

サンプルコード

HTML

<video id="video" autoplay>
	<source src="media/sample.mp4">
	<source src="media/sample.ogv">
	<source src="media/sample.webm">
</video>

JavaScript

var videoElem = document.getElementById('video');

videoElem.addEventListener('loadedmetadata', function() {
	videoElem.playbackRate = 0.75;
});
  • ※ window.onloadではいくつかのイベントが発生しません。
    この場合はDOMContentLoadedで発生するようになります。
    (progress, durationchange, loadedmetadata, loadeddataなど)

JavaScript逆引きリファレンス一覧へ戻る