＆lt; audio＆gt;を使用して、html5にオーディオとビデオを埋め込むにはどうすればよいですか and＆lt; video＆gt; 要素？

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

HTML5の<audio></audio>および<video></video>要素は、オーディオとビデオコンテンツをWebページに埋め込む簡単な方法を提供します。基本構造は単純です。オーディオには、 <audio></audio>タグを使用して<source></source>タグを使用してソースを指定し、異なるブラウザの互換性のために複数のソースを提供できるようにします。ビデオでは、 <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をサポートしていない場合、 audio.oggを試みます。どちらもサポートされていない場合、フォールバックテキストが表示されます。

ビデオ例：

 <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を再生しようとします。どちらもサポートされていない場合は、フォールバックメッセージを使用します。 widthとheight属性は、初期寸法を設定します。 controls属性は、デフォルトの再生コントロールを追加します。

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

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

属性：

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

方法：

• play() ：再生を開始します。
• pause() ：再生を一時停止します。
• currentTime ：現在の再生時間を取得または設定します。
• volume ：ボリューム（0.0〜1.0）を取得または設定します。
• muted ：ミュートされた状態を取得または設定します。

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

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

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

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

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

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

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

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

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