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>

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

サンプルの結果

<audio> 要素の属性

<video> 要素の属性

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

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

オススメ書籍

人気記事

始めるための基礎知識

タグを覚えよう(非推奨タグ含む)

入門者を卒業した方へ

HTML5を覚えよう

スタイルシートを覚えよう

レスポンシブルデザイン対応

アクセス数増加、収入を得る仕組み

サイト運営にあたって

その他の言語

リファレンス

人気コンテンツ