<audio></audio>および<video></video>要素を使用してHTML5にオーディオとビデオを埋め込む

HTML5の<audio></audio>および<video></video>要素は、オーディオとビデオコンテンツをWebページに埋め込む簡(jiǎn)単な方法を提供します。基本構(gòu)造は単純です。オーディオには、 <audio></audio>タグを使用して<source></source>タグを使用してソースを指定し、異なるブラウザの互換性のために複數(shù)のソースを提供できるようにします。ビデオでは、 <video></video>タグを同様に使用します。例があります：

オーディオの例：

 <code class="html"><audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </source></source></audio></code>

このコードは、 audio.mp3を最初に再生しようとします。ブラウザがmp3をサポートしていない場(chǎng)合、 audio.oggを試みます。どちらもサポートされていない場(chǎng)合、フォールバックテキストが表示されます。

ビデオ例：

 <code class="html"><video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </source></source></video></code>

この例も同様に、 video.mp4 then video.webmを再生しようとします。どちらもサポートされていない場(chǎng)合は、フォールバックメッセージを使用します。 widthとheight屬性は、初期寸法を設(shè)定します。 controls屬性は、デフォルトの再生コントロールを追加します。

一般的な屬性と<audio></audio>および<video></video>要素の方法

<audio></audio>と<video></video>要素の両方が、多くの一般的な屬性とメソッドを共有しています。ここにいくつかの重要なものがあります：

屬性：

• src ：メディアファイルのURLを指定します。
• controls ：デフォルトの再生コントロール（再生、一時(shí)停止、ボリュームなど）を追加します。
• autoplay ：ページが読み込まれたときに自動(dòng)的に再生を開始します。 （多くの場(chǎng)合、オートプレイはユーザーエクスペリエンスのためにブラウザによって制限されています。）
• loop ：メディアを繰り返し再生します。
• muted ：再生を開始しますミュート。
• preload ：メディアのロード方法（ auto 、メタmetadata 、 none ）をブラウザにヒントします。
• poster ：（ビデオのみ）再生が開始される前に表示する畫像を指定します。
• widthとheight ：ビ??デオプレーヤーの寸法を設(shè)定します。

方法：

• play() ：再生を開始します。
• pause() ：再生を一時(shí)停止します。
• currentTime ：現(xiàn)在の再生時(shí)間を取得または設(shè)定します。
• volume ：ボリューム（0.0?1.0）を取得または設(shè)定します。
• muted ：ミュートされた狀態(tài)を取得または設(shè)定します。

これらの屬性と方法により、メディアの再生エクスペリエンスを大幅に制御できます。イベントリスナーを使用して潛在的なエラーを処理することを忘れないでください（たとえば、 errorイベント）。

さまざまなブラウザの互換性の問題を処理します

ブラウザの互換性は、オーディオとビデオの埋め込みの重要な側(cè)面です。さまざまなブラウザが異なるコーデック（メディアデータのエンコード方法）をサポートしています。これに対処するには：

• 複數(shù)のソースを提供する：上記の例に示すように、 <source></source>要素を使用して、複數(shù)のメディアソースに異なるコーデック（MP4、WebM、OGG）を提供します。これにより、ブラウザが互換性のある形式を見つけることができます。
• JavaScriptライブラリを使用する： Howler.js（オーディオ用）のようなライブラリは、ブラウザー固有の複雑さの一部を抽象化し、異なるブラウザーで一貫したAPIを提供することができます。
• フォールバックコンテンツ： <audio></audio>または<video></video>要素または指定されたコーデックをサポートしていないブラウザのフォールバックコンテンツ（例のテキストメッセージなど）を常に提供します。
• Modernizr： ModernizrのようなJavaScriptライブラリは、ブラウザー機(jī)能を検出し、ブラウザーサポートに基づいてさまざまなコンテンツを提供できるようにします。

これらの戦略を?qū)g裝することにより、オーディオとビデオのコンテンツが幅広いブラウザで正しく再生される可能性を大幅に改善できます。

埋め込まれたオーディオとビデオのレスポンシブデザインを確保します

レスポンシブデザインにより、メディアはさまざまな畫面サイズに適応します。これを達(dá)成する方法は次のとおりです。

• パーセンテージベースの寸法を使用します。固定widthとheight屬性の代わりに、パーセンテージを使用します。これにより、ビデオプレーヤーは畫面サイズに比例してスケーリングできます。例： <video width="100%" height="auto" controls></video> 。
• CSSスタイリング： CSSを使用して、レイアウトと応答性を制御します。メディアクエリを使用して、畫面サイズに基づいてメディアプレーヤーのサイズと配置を調(diào)整できます。
• コンテナ要素：コンテナ要素（例えば、
  ）に<audio></audio>または<video></video>要素をラップし、コンテナをスタイリングして適切に応答します。これにより、全體的なレイアウトをより適切に制御できます。
• アスペクト比：歪みを避けるために、ビデオの正しいアスペクト比を維持します。 CSSパディングまたはその他のテクニックを使用してこれを?qū)g現(xiàn)できます。たとえば、アスペクト比に基づいて計(jì)算された割合のパディングボトムを使用します。

これらの手法を組み合わせることにより、埋め込まれたオーディオとビデオコンテンツは、さまざまなデバイスと畫面サイズにシームレスに適応し、すべてのプラットフォームで一貫したユーザーエクスペリエンスを提供します。