HTML5-オーディオとビデオ

HTML5の機能には、Flashを必要としないネイティブオーディオおよびビデオのサポートが含まれます。

HTML5の<audio>タグと<video>タグを使用すると、Webサイトにメディアを簡単に追加できます。設定する必要がありますsrc 属性を使用してメディアソースを識別し、ユーザーがメディアを再生および一時停止できるようにコントロール属性を含めます。

埋め込みビデオ

これがあなたのウェブページにビデオファイルを埋め込む最も簡単な形です-

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

現在のHTML5ドラフト仕様では、ブラウザがビデオタグでサポートする必要のあるビデオ形式を指定していません。しかし、最も一般的に使用されるビデオ形式は次のとおりです。

Ogg −ThedoraビデオコーデックとVorbisオーディオコーデックを含むOggファイル。
mpeg4 −H.264ビデオコーデックとAACオーディオコーデックを備えたMPEG4ファイル。

<source>タグを使用して、メディアタイプや他の多くの属性とともにメディアを指定できます。ビデオ要素は複数のソース要素を許可し、ブラウザは最初に認識された形式を使用します-

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

これにより、次の結果が生成されます-

ビデオ属性の仕様

HTML5ビデオタグは、コントロールのルックアンドフィールとさまざまな機能を制御するためのいくつかの属性を持つことができます-

シニア番号	属性と説明
1	autoplay このブール属性を指定すると、データの読み込みを停止せずに、できる限りすぐにビデオの再生が自動的に開始されます。
2	autobuffer このブール属性を指定すると、自動的に再生するように設定されていなくても、ビデオは自動的にバッファリングを開始します。
3	controls この属性が存在する場合、ユーザーは、音量、シーク、再生の一時停止/再開など、ビデオの再生を制御できます。
4	height この属性は、ビデオの表示領域の高さをCSSピクセルで指定します。
5	loop このブール属性を指定すると、ビデオは最後に到達した後、自動的に最初に戻ることができます。
6	preload この属性は、ビデオがページの読み込み時に読み込まれ、実行できる状態になることを指定します。自動再生が存在する場合は無視されます。
7	poster これは、ユーザーが再生またはシークするまで表示する画像のURLです。
8	src 埋め込む動画のURL。これはオプションです。代わりに、ビデオブロック内の<source>要素を使用して、埋め込むビデオを指定できます。
9	width この属性は、ビデオの表示領域の幅をCSSピクセルで指定します。

オーディオの埋め込み

HTML5は、次のようにHTMLまたはXHTMLドキュメントにサウンドコンテンツを埋め込むために使用される<audio>タグをサポートしています。

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

現在のHTML5ドラフト仕様では、ブラウザがオーディオタグでサポートするオーディオ形式を指定していません。しかし、最も一般的に使用されるオーディオ形式はogg, mp3 そして wav。

<source＆ggt;を使用できますメディアタイプおよび他の多くの属性とともにメディアを指定するタグ。オーディオ要素は複数のソース要素を許可し、ブラウザは最初に認識された形式を使用します-

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

これにより、次の結果が生成されます-

オーディオ属性の仕様

HTML5オーディオタグは、コントロールのルックアンドフィールとさまざまな機能を制御するためのいくつかの属性を持つことができます-

シニア番号	属性と説明
1	autoplay このブール属性を指定すると、データのロードを停止せずに、オーディオの再生が可能になるとすぐに自動的に開始されます。
2	autobuffer このブール属性を指定すると、自動的に再生するように設定されていなくても、オーディオは自動的にバッファリングを開始します。
3	controls この属性が存在する場合、ユーザーは音量、シーク、再生の一時停止/再開などのオーディオ再生を制御できます。
4	loop このブール属性を指定すると、オーディオは最後に到達した後、自動的に最初に戻ることができます。
5	preload この属性は、オーディオがページのロード時にロードされ、実行できる状態になることを指定します。自動再生が存在する場合は無視されます。
6	src 埋め込むオーディオのURL。これはオプションです。代わりに、ビデオブロック内の<source>要素を使用して、埋め込むビデオを指定できます。

メディアイベントの処理

HTML5オーディオおよびビデオタグは、JavaScriptを使用してコントロールのさまざまな機能を制御するためのいくつかの属性を持つことができます-

S.No.	イベントと説明
1	abort このイベントは、再生が中止されたときに生成されます。
2	canplay このイベントは、メディアを再生できる十分なデータが利用可能になったときに生成されます。
3	ended このイベントは、再生が完了すると生成されます。
4	error このイベントは、エラーが発生したときに生成されます。
5	loadeddata このイベントは、メディアの最初のフレームの読み込みが完了すると生成されます。
6	loadstart このイベントは、メディアのロードが開始されたときに生成されます。
7	pause このイベントは、再生が一時停止されたときに生成されます。
8	play このイベントは、再生が開始または再開されたときに生成されます。
9	progress このイベントは、メディアのダウンロードの進行状況を通知するために定期的に生成されます。
10	ratechange このイベントは、再生速度が変化したときに生成されます。
11	seeked このイベントは、シーク操作が完了すると生成されます。
12	seeking このイベントは、シーク操作が開始されたときに生成されます。
13	suspend このイベントは、メディアのロードが一時停止されたときに生成されます。
14	volumechange このイベントは、音量が変化したときに生成されます。
15	waiting このイベントは、要求された操作（再生など）が別の操作（シークなど）の完了まで遅延した場合に生成されます。

以下は、与えられたビデオを再生することを可能にする例です-

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

これにより、次の結果が生成されます-

メディアタイプ用のサーバーの構成

ほとんどのサーバーは、デフォルトでは正しいMIMEタイプのOggまたはmp4メディアを提供しないため、これに適切な構成を追加する必要があります。

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4