videoタグに使えるイベントハンドラのまとめ
[sample url=”2015/video-element-events/loadedmetadata” text=”loadedmetadata.html”]
現在の動画のロードが完了したとき(loadeddata)
readyState属性の値がHAVE_CURRENT_DATAになったときと同じタイミングで発火します。
[sample url=”2015/video-element-events/loadeddata” text=”loadeddata.html”]
動画の再生準備ができたとき(canplay)
readyState属性の値がHAVE_FUTURE_DATAになったときと同じタイミングで発火します。
[sample url=”2015/video-element-events/canplay” text=”canplay.html”]
動画の再生準備ができたとき(canplaythrough)
readyState属性の値がHAVE_ENOUGH_DATAになったときと同じタイミングで発火します。
[sample url=”2015/video-element-events/canplaythrough” text=”canplaythrough.html”]
動画を再生中のとき(playing)
動画が再生されているときに発火するイベントです。
[sample url=”2015/video-element-events/playing” text=”playing.html”]
動画のロード待ちをしているとき(waiting)
動画のロードが遅く、再生していた動画が途中で止まってしまったときに発火するイベントです。
[sample url=”2015/video-element-events/waiting” text=”waiting.html”]
シークポインタを動かしているとき(seeking)
動画の再生位置を示すポインタを動かすと発火するイベントです。
[sample url=”2015/video-element-events/seeking” text=”seeking.html”]
動かしていたシークポインタを離したとき(seeked)
動画の再生位置を示すポインタを動かした後に離すと発火するイベントです。
[sample url=”2015/video-element-events/seeked” text=”seeked.html”]
動画が最後まで再生されたとき(ended)
動画が最後まで再生されたときに発火するイベントです。途中を飛ばしても最後のフレームが再生されれば発火します。
[sample url=”2015/video-element-events/ended” text=”ended.html”]
動画の長さが変化したとき(durationchange)
このイベントは、主に動的に別の動画を読み込むときに使われます。
サンプルではページにアクセスした時点で一度アラートが表示されますが、これは動画を読み込む前(0秒)と読み込んだ後で再生時間が変わっているということになります。
[sample url=”2015/video-element-events/durationchange” text=”durationchange.html”]
動画の再生位置(時間)が変化したとき(timeupdate)
このイベントは、主に動的に別の動画を読み込むときに使われます。
[sample url=”2015/video-element-events/timeupdate” text=”timeupdate.html”]
動画の再生が開始されたとき(play)
[sample url=”2015/video-element-events/play” text=”play.html”]
動画が一時停止されたとき(pause)
[sample url=”2015/video-element-events/pause” text=”pause.html”]
動画の再生速度が変化したとき(ratechange)
playbackRate属性またはdefaultPlaybackRate属性の値が変化したときに発火するイベントです。
[sample url=”2015/video-element-events/ratechange” text=”ratechange.html”]
音量が変化したとき(volumechange)
[sample url=”2015/video-element-events/volumechange” text=”volumechange.html”]
参考
動画のロードが開始されたとき(loadstart)
netWorkState属性の値がNETWORK_LOADINGになったときと同じタイミングで発火します。ページにアクセスして一度だけ発火するイベントです。
[sample url=”2015/video-element-events/loadstart” text=”loadstart.html”]
動画のロード中であるとき(progress)
netWorkState属性の値がNETWORK_LOADINGであるときと同じタイミングで発火します。ロードしたところまで薄い色が着いていく仕様を見ますが、これが動いているときに発火します。
[sample url=”2015/video-element-events/progress” text=”progress.html”]
動画のロード中であるとき(suspend)
netWorkState属性の値がNETWORK_IDLEであるときと同じタイミングで発火します。
[sample url=”2015/video-element-events/suspend” text=”suspend.html”]
動画が空になったとき(emptied)
load()によって動画が初期化されたときに発火します。netWorkState属性の値がNETWORK_EMPTYであるときに発火します。
[sample url=”2015/video-element-events/emptied” text=”emptied.html”]
動画が再生できなくなったとき(stalled)
netWorkState属性の値がNETWORK_LOADINGであるときに、何らかの理由で動画情報が取得できなくなったときに発火します。
[sample url=”2015/video-element-events/stalled” text=”stalled.html”]
動画のメタ情報のロードが完了したとき(loadedmetadata)
動画の長さやサイズの読み込みが完了したときに発火します。readyState属性の値がHAVE_METADATAになったときと同じタイミングで発火します。
執筆者Writer
AnTytle
コメントComment