タイトル画像
サイトタイトル画像

HTM 5の<audio>および<video>要素の全イベントを監視してみる

ブラウザごとに仕様が大きく異なる<video>要素と<audio>要素を説明します。。

サンプルの結果

<audio> 要素の属性

属性名 値の形式 説明
src xs:anyURI メディアソースのURLを指定します
autobuffer autobuffer ブラウザが自動的にコンテンツをバッファリングします。それ以外の場合は、ユーザーが関連APIを介してコンテンツのバッファリングを行います
autoplay autoplay ブラウザはページの読み込みが終わると自動的にオーディオの再生を開始します
loop loop ブラウザはメディアの終端に達すると最初に戻ってコンテンツの再生を繰り返します
controls controls ブラウザは処理中のリソースに関してユーザーが対話的操作を行えるコントロールを表示します

<video> 要素の属性

属性名 値の形式 説明
src xs:anyURI メディアソースのURLを指定します
autobuffer autobuffer ブラウザが自動的にコンテンツをバッファリングします。それ以外の場合は、ユーザーが関連APIを介してコンテンツのバッファリングを行います
autoplay autoplay ブラウザはページの読み込みが終わると自動的にビデオの再生を開始します
loop loop ブラウザはメディアの終端に達すると最初に戻ってコンテンツの再生を繰り返します
controls controls ブラウザは処理中のリソースに関してユーザーが対話的操作を行えるコントロールを表示します
width dimension ###(cm,em,en,in,px,pt,%) ビデオ画像の幅を適切な単位で指定します。未指定の場合はheightに応じて決定されます
height dimension ###(cm,em,en,in,px,pt,%) ビデオ画像の高さを適切な単位で指定します。未指定の場合はwidthに応じて決定されます
poster xs:anyURI 画像へのリンクを指定します。バッファリングがまだ済んでいない場合に使用されます。

メディアユーザーインターフェースのイベント

イベント名 実行可能となるタイミング
loadstart ブラウザがコンテンツの検索を開始した場合に発生
progress ブラウザがコンテンツの取得を実行した場合に発生
suspend ブラウザが意図的にコンテンツの取得を現在行っていない場合に発生(ダウンロードは未完了)
abort ダウンロードの完了前にコンテンツの取得を停止した場合に発生(この停止はエラーによるものではない)
error コンテンツの取得実行中にエラーが発生した場合に発生
emptied 読み込み中に致命的なエラーが発生したか、実行状態ででload()メソッドが実行された場合に発生
stalled ブラウザがコンテンツの取得を試みたが、データがまだ用意されていない場合に発生
play 再生が開始された。play()メソッドからの復帰後に発生する場合に発生
pause 再生が一時停止された。pauseメソッドからの復帰後に発生する場合に発生
loadedmetadata ブラウザがメディアリソースの長さと寸法を判定した場合に発生
loadeddata コンテンツの表示を現在の再生位置で初めて行えるようになった場合に発生
waiting 次のフレームが利用不可のため再生を停止したが、そのフレームがやがて利用可能になると想定している場合に発生
playing 再生が開始された場合に発生
canplay 今すぐに再生を再開できるが、バッファリングが不十分でコンテンツを最後まで表示できないと予測している場合に発生
canplaythrough 今すぐに再生を開始してもバッファリングで停止することなく最後まで表示できると予測している場合に発生
seeking シークがtrueに変化し、イベントを発生させるのに十分な時間がシーク操作にかかっている場合に発生
seeked シークがfalseに変化した場合に発生
timeupdate 通常の再生が行われ現在の再生位置の変化が起こった場合に発生
ended 再生が正常に終了(停止)した場合に発生
ratechange defaultPlaybackRate属性とplaybackRate属性のどちらかが更新された場合に発生
durationchange duration属性が更新された場合に発生
volumechange volume属性とmuted属性のどちらかが変化した場合に発生

仕様に規定されている全イベントを監視してみる

video/oggはFireFox用に、video/mp4はSafari,Opera,Google chrome用に用意しています。

「ogg」の動作には「.htaccess」に次のように記載しましょう。

AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

「Load」ボタンを押すとコンテンツがロードされ、「Play」ボタンを押すとコンテンツが再生されます。
これにより、イベントがどのタイミングで発生するかを確認できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript">
function loadvideo() {
        var video = document.getElementById('videotest');
 	document.getElementById('videosource1').src='sora.mp4';
 	document.getElementById('videosource2').src='sora.ogv';
 	document.getElementById('videosource3').src='sora.webm';
	video.load();
}
function playvideo() {
   	var video = document.getElementById('videotest');
	video.play();
}
function log(msg) {
	document.getElementById('console').innerHTML =document.getElementById('console').innerHTML +"<br/>"+msg
}
</script>
</head>

<body>

<input type="button" value ="Load" OnClick="loadvideo();">
<input type="button" value ="Play" OnClick="playvideo();">

<div style="width: 640px;height: 480px;">

<video id="videotest" width="640" height="480" controls="controls" preload="auto" poster="bg.png"
  onabort="log('abort');"
  oncanplay="log('canplay');"
  oncanplaythrough="log('canplaythrough');"
  ondurationchange="log('durationchange');"
  onemptied="log('emptied');"
  onended="log('ended');"
  onerror="log('error');"
  onloadeddata="log('loadeddata');"
  onloadedmetadata="log('loadedmetadata');"
  onloadstart="log('loadstart');"
  onpause="log('pause');"
  onplay="log('play');"
  onplaying="log('playing');"
  onprogress="log('progress');"
  onratechange="log('ratechange');"
  onreadystatechange="log('readystatechange');"
  onseeked="log('seeked');"
  onseeking="log('seeking');"
  onstalled="log('stalled');"
  onsuspend="log('suspend');"
  ontimeupdate="log('timeupdate');"
  onvolumechange="log('volumechange');"
  onwaiting="log('waiting');">
<source id='videosource1' src="" type="video/mp4"/>
<source id='videosource2' src="" type="video/ogg" />
<source id='videosource3' src="" type="video/webm" />
</video>

</div>

<div id='console'>
</div>

</body>
</html>
スポンサードリンク

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

人気コンテンツ

    Copyright ©2015 .(since 2012/08/06)