cman.jp > WEBページ作成TOP > javascriptサンプル
WEBページ作成
広告
メディアイベント
メディア操作によって発生するイベントは、下記２０種類あります。
| イベント名 | 発生タイミング |
|---|---|
| oncanplay | 再生が可能になったとき |
| oncanplaythrough | 現状の速度で読み込みを続ければ途切れることなく動画を再生できるとき |
| ondurationchange | コンテンツの長さの変化を示すメタデータが読み込まれたとき |
| onemptied | コンテンツが空になった時。 例えば、実行状態でload()が実行されたとき |
| onended | 再生終了時 |
| onloadeddata | 現在の再生位置でvideo映像の表示が可能になったとき |
| onloadedmetadata | メタデータの読み込みが完了したとき |
| onloadstart | メディア・ファイルの読み込みを開始したとき |
| onpause | メディア・ファイルの再生が一時停止のとき |
| onplay | メディア・ファイルを再生したとき |
| onplaying | メディア・ファイルを再生中のとき |
| onprogress | メディア・ファイルを読み込み中のとき |
| onratechange | メディア・ファイルの再生速度が変化したとき |
| onseeked | videoファイルのシーク終了時 |
| onseeking | videoファイルのシーク開始時 |
| onstalled | メディアのデータの取得に失敗したとき |
| onsuspend | サスペンドからの復帰時 |
| ontimeupdate | video の再生開始からの時間の更新時 |
| onvolumechange | 音量が変化したとき |
| onwaiting | video再生が中断して待機状態になったとき |
広告
メディアイベントの発生確認
【メディアイベント確認】
<script type="text/javascript">
function canplay_V(obj){ ～ イベント発生時の処理を指定 ～ }
【～ その他のイベントも同様 ～】
function emptied_V(){ ～ イベント発生時の処理を指定 ～ }
function load_V(){
var video = document.getElementById("video_V");
video.load();
video.addEventListener("emptied", emptied_V);}
function ratechange_V(){ ～ イベント発生時の処理を指定 ～ }
function speed_V(){
var video = document.getElementById("video_V");
video.playbackRate = 0.5;
video.addEventListener("ratechange", ratechange_V);}
</script>
<video src="e23.mp4" controls width="300" height="250" poster="MTFUJI.jpg" id="video_V"
oncanplay="canplay_V(this)"
oncanplaythrough="canplaythrough_V(this)"
ondurationchange="durationchange_V(this)"
onended="ended_V(this)"
onloadeddata="loadeddata_V(this)"
onloadedmetadata="loadedmetadata_V(this)"
onpause="pause_V(this)"
onplay="play_V(this)"
onplaying="playing_V(this)"
onprogress="progress_V(this)"
onseeked="seeked_V(this)"
onseeking="seeking_V(this)"
onstalled="stalled_V(this)"
onsuspend="suspend_V(this)"
ontimeupdate="timeupdate_V(this)"
onvolumechange="volumechange_V(this)"
onwaiting="waiting_V(this)">
<video>
<input> type="button" value="リロード"> onclik="load_V()">
<input> type="button" value="速度変更"> onclik="speed_V()">
function canplay_V(obj){ ～ イベント発生時の処理を指定 ～ }
【～ その他のイベントも同様 ～】
function emptied_V(){ ～ イベント発生時の処理を指定 ～ }
function load_V(){
var video = document.getElementById("video_V");
video.load();
video.addEventListener("emptied", emptied_V);}
function ratechange_V(){ ～ イベント発生時の処理を指定 ～ }
function speed_V(){
var video = document.getElementById("video_V");
video.playbackRate = 0.5;
video.addEventListener("ratechange", ratechange_V);}
</script>
<video src="e23.mp4" controls width="300" height="250" poster="MTFUJI.jpg" id="video_V"
oncanplay="canplay_V(this)"
oncanplaythrough="canplaythrough_V(this)"
ondurationchange="durationchange_V(this)"
onended="ended_V(this)"
onloadeddata="loadeddata_V(this)"
onloadedmetadata="loadedmetadata_V(this)"
onpause="pause_V(this)"
onplay="play_V(this)"
onplaying="playing_V(this)"
onprogress="progress_V(this)"
onseeked="seeked_V(this)"
onseeking="seeking_V(this)"
onstalled="stalled_V(this)"
onsuspend="suspend_V(this)"
ontimeupdate="timeupdate_V(this)"
onvolumechange="volumechange_V(this)"
onwaiting="waiting_V(this)">
<video>
<input> type="button" value="リロード"> onclik="load_V()">
<input> type="button" value="速度変更"> onclik="speed_V()">
動画のコントローラを操作してください。
発生したイベント名がテキストエリアに発生順に表示されます。
但し、emptiedはリロードボタン、ratechangeは速度変更ボタンを押下する事で発生します。
※progress,timeupdateは、大量に発生するので、初期状態は表示対象外としています。
チェックを外す事で、その他のイベントも表示対象外となります。
発生したイベント名がテキストエリアに発生順に表示されます。
但し、emptiedはリロードボタン、ratechangeは速度変更ボタンを押下する事で発生します。
※progress,timeupdateは、大量に発生するので、初期状態は表示対象外としています。
チェックを外す事で、その他のイベントも表示対象外となります。
| 表示対象イベント選択 | |
|---|---|
| 全選択／解除 |
canplay
canplaythrough
durationchange
emptied
ended loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting |
動画：kawacho様、画像：skyseeker様よりダウンロードし利用させていただいています。
注意事項
- ブラウザによっては、コントローラの操作では発生しないイベントもあります。
また、ブラウザによって発生しないイベントもあるので、注意が必要です。
広告