Html5-audio-video

提供：Dev Guides
移動先:案内、検索

HTML5-オーディオとビデオ

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

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

ビデオを埋め込む

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

<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ビデオタグには、コントロールのルックアンドフィールとさまざまな機能を制御するための多くの属性があります-

Sr.No. Attribute & Description
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オーディオタグには、コントロールのルックアンドフィールとさまざまな機能を制御するための多くの属性があります-

Sr.No. Attribute & Description
1

autoplay

このブール属性を指定した場合、オーディオの再生は、データのロードを終了することなく停止することなく、できる限り早く自動的に開始されます。

2

autobuffer

このブール属性を指定すると、オーディオは自動的に再生するように設定されていなくても、自動的にバッファリングを開始します。

3

controls

この属性が存在する場合、ユーザーは音量、シーク、一時停止/再開を含むオーディオ再生を制御できます。

4

loop

このブール属性が指定されている場合、オーディオは最後に到達した後、自動的に最初に戻ることを許可します。

5

preload

この属性は、ページのロード時にオーディオがロードされ、実行準備が整うことを指定します。 自動再生が存在する場合は無視されます。

6

src

埋め込むオーディオのURL。 これはオプションです。代わりに、ビデオブロック内で<source>要素を使用して、埋め込むビデオを指定できます。

メディアイベントの処理

HTML5オーディオおよびビデオタグには、JavaScriptを使用してコントロールのさまざまな機能を制御するための多くの属性があります-

S.No. Event & Description
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
「https://www.finddevguides.com/index.php?title=Html5-audio-video&oldid=9571」から取得
Powered by MediaWiki