WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > javascriptサンプル

メディアイベント

メディア操作によって発生するイベントは、下記20種類あります。

イベント名発生タイミング
oncanplay再生が可能になったとき
oncanplaythrough現状の速度で読み込みを続ければ途切れることなく動画を再生できるとき
ondurationchangeコンテンツの長さの変化を示すメタデータが読み込まれたとき
onemptiedコンテンツが空になった時。
例えば、実行状態でload()が実行されたとき
onended再生終了時
onloadeddata現在の再生位置でvideo映像の表示が可能になったとき
onloadedmetadataメタデータの読み込みが完了したとき
onloadstartメディア・ファイルの読み込みを開始したとき
onpauseメディア・ファイルの再生が一時停止のとき
onplayメディア・ファイルを再生したとき
onplayingメディア・ファイルを再生中のとき
onprogressメディア・ファイルを読み込み中のとき
onratechangeメディア・ファイルの再生速度が変化したとき
onseekedvideoファイルのシーク終了時
onseekingvideoファイルのシーク開始時
onstalledメディアのデータの取得に失敗したとき
onsuspendサスペンドからの復帰時
ontimeupdatevideo の再生開始からの時間の更新時
onvolumechange音量が変化したとき
onwaitingvideo再生が中断して待機状態になったとき

【指定可能なタグ】
<audio>、 <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()">
動画のコントローラを操作してください。
発生したイベント名がテキストエリアに発生順に表示されます。
但し、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様よりダウンロードし利用させていただいています。


ページTOP

注意事項

  • ブラウザによっては、コントローラの操作では発生しないイベントもあります。
    また、ブラウザによって発生しないイベントもあるので、注意が必要です。
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン