HTML5でメディアを効率的にストリーミングするには、MP4やWebMなどの互換性のある形式を使用して、ビデオやMP3またはOGGをオーディオに使用します。 1）ハンドブレーキやAudacityなどのツールを使用してアップロードする前にファイルを圧縮して、品質(zhì)とサイズのバランスを取ります。 2）プリロード屬性を賢く使用します。それ以外の場(chǎng)合は、重要なメディア、メタデータにautoを使用します。 3）混亂を避けるために、ミュートされたオーディオでのみオートプレイを有効にします。 4）CSSでの応答性を確保し、サポートされていないブラウザーにフォールバックコンテンツを提供します。これらの手順に従うことで、負(fù)荷時(shí)間が短くなり、再生が滑らかになり、帯域幅の使用が減少します。

HTML5ビデオとオーディオを使用してメディアを効率的にストリーミングするだけでは、 <video></video>または<audio></audio>タグをページにたたくだけではありません。ファイルが高速にロードされ、スムーズに再生され、不必要に帯域幅を食べないようにすることです。

ここに、物事を過(guò)剰に抑制せずにそれを?qū)g現(xiàn)するためのいくつかの実用的な方法があります。

適切なファイル形式を使用します

すべてのブラウザが同じメディア形式をサポートしているわけではないため、互換性のあるメディア形式を選択することが重要です。ビデオについては、 MP4（H.264）を使用してください。ほぼどこでも動(dòng)作します。特にFirefoxまたはSafariで、より広範(fàn)なサポートが必要な場(chǎng)合は、 Webmも提供することを検討してください。

オーディオの場(chǎng)合、 MP3は広くサポートされていますが、 OGGとAACは低ビットレートの品質(zhì)に向けて優(yōu)れています。このような<audio></audio>または<video></video>タグ內(nèi)で複數(shù)のソースを提供できます。

 <ビデオコントロール>
  <source src = "movie.mp4" type = "video/mp4">
  <source src = "movie.webm" type = "video/webm">
  ブラウザはビデオタグをサポートしていません。
</video>

これにより、ブラウザは最適に処理できる形式を選択します。

アップロードする前にメディアファイルを最適化します

大きなファイル=ロードが遅い=不幸なユーザー。

アップロードする前に、ビデオやオーディオ用のAudacity用のハンドブレーキなどのツールを使用してビデオとオーディオを圧縮します。品質(zhì)とファイルサイズのバランスを目指します。

• ビデオの場(chǎng)合：1080pの5?8 Mbpsが通常適しています。
• オーディオの場(chǎng)合：128 kbps AACまたはMP3は、ほとんどのWeb使用に十分です。

また、プログレッシブダウンロードエンコードを使用して、ファイルが完全にダウンロードされる前に再生を開(kāi)始します。

PreloadおよびAutoplay屬性をスマートに追加します

preload屬性は、ページが読み込まれたときにロードするメディアの量をブラウザに伝えます。オプションは次のとおりです。

• preload="auto" - ブラウザはファイル全體を早期にロードします
• preload="metadata" - 基本情報(bào)のみをロードする（期間など）
• preload="none" - ユーザーが[再生]をクリックするまで待ちます

あなたのメディアが（ヒーローバナーのように）重要である場(chǎng)合、 auto理にかなっています。しかし、ページのさらに下にある場(chǎng)合、 metadata帯域幅を節(jié)約します。

Autoplayは、ユーザーがサウンドを期待している場(chǎng)合を除き、Muted Audioで最適に機(jī)能します。それ以外の場(chǎng)合は、一部のブラウザによって不快になり、さらにはブロックされる可能性があります。

応答性のあるコントロールとフォールバックを提供します

さまざまなデバイスでメディアが適切にスケーリングすることを確認(rèn)してください。 width: 100%; height: auto;ビデオがレイアウトを壊さないようにします。

また、ブラウザがサポートしていない場(chǎng)合に備えて、常に<video></video>または<audio></audio>タグ內(nèi)にフォールバックコンテンツを含めます。ファイルをダウンロードするリンクやユーザーに何をすべきかを伝えるメッセージなどです。

また、外部ホストのメディア（YouTubeやSoundCloudなど）を埋め込んでいる場(chǎng)合は、公式の埋め込みコードに固執(zhí)してください。彼らはすでにあなたのためのストリーミングの最適化を処理しています。

それは基本的にそれです。 HTML5でメディアを効率的にストリーミングすることはロケットサイエンスではありませんが、これらの手順をスキップすると、ページが遅くなり、ユーザーがイライラする可能性があります。少し準(zhǔn)備し、フォーマットを賢明に選択し、ブラウザに殘りをさせます。

以上がHTML5ビデオとオーディオを使用して、メディアを効率的にストリーミングします。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。