GTSPORTで90度超えドリフトをする方法
netWorkState属性の値がNETWORK_LOADINGになったときと同じタイミングで発火します。ページにアクセスして一度だけ発火するイベントです。
videoタグに使えるイベントハンドラのまとめ
動画のロードが開始されたとき(loadstart)
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によるイベント発火');
});
参考
- 次々と増えるmeta,linkタグの種類と役割について整理しよう！
- デバイスの詳細なタッチ情報を取得できる「Touch Events Extensions」
- サイトアイコンをスマホのHome画面に表示させる「apple-touch-icon」
- IE11でHTML5デザインが崩れる現象を対策する「x-ua-compatible」
- videoタグのあらゆる動画情報をJavaScriptで取得する方法
- ユーザーのコピペ、カットを自由に操作できる「Clipboard API」
- セットした文字列を読み上げてくれる「Speech Synthesis API」
- デバイスの位置情報を取得できる「Geolocation API」
執筆者
AnTytle