html5に画像やビデオを埋め込む方法は？-H5 チュートリアル-php.cn

html5に画像やビデオを埋め込む方法は？

Robert Michael Kim

リリース： 2025-03-10 14:58:15

オリジナル

224 人が閲覧しました

html5に画像とビデオを埋め込む方法は？

html5に画像とビデオを埋め込むのは簡単で、画像の<img>タグとビデオの<video>タグを使用します。画像の場合、src属性は画像のURLまたはパスを指定しますが、alt属性はアクセシビリティおよび検索エンジンの代替テキストを提供します。 altテキストは、画像のコンテンツを簡潔に説明する必要があります。たとえば、

<img src="myimage.jpg" alt="A beautiful sunset over the ocean">

ログイン後にコピー

動画の場合、<video>タグを使用すると、<source>タグを使用して複数のビデオソースを指定して、より幅広いブラウザーの互換性を確保するさまざまな形式（MP4、Webm、OGGなど）をサポートできます。 controls属性は、組み込みの再生、一時停止、およびボリュームコントロールを追加します。また、ビデオの再生を開始する前に表示するposter属性を使用してポスター画像を指定することもできます。例は次のとおりです。

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

ログイン後にコピー

テキスト「ブラウザはビデオタグをサポートしていません」は、<video>要素をサポートしないブラウザーのフォールバックとして機能します。画像やビデオを表示するために必要なHTMLタグは、"myimage.jpg"、"myvideo.mp4"、および"myvideo.webm"を実際のファイルパスまたはURLに置き換えることを忘れないでください。画像を表示するには、画像を表示するには、主に

タグが必要です。その重要な属性は、

（画像のソース）と

（代替テキスト）です。オプションの属性には、画像表示を制御するための

、<img>、src（CSSスタイリングの場合）などが含まれます。 altタグ内では、通常、widthタグを使用して、さまざまな形式（height属性）の複数のビデオソースを指定して、さまざまなブラウザー間の互換性を確保します。 style、

、

（プレーヤーコントロールを追加する）、<video>（再生の前に表示する静止画像）、<video>（自動的に再生を開始する）などの属性が一般的に使用されます。 HTML5ビデオ要素をサポートしていないブラウザの<source>タグ内でフォールバックメッセージをお勧めします。最も効果的な方法は、CSSを使用することです。 HTMLで固定typeおよびwidth属性を指定する代わりに、CSSを使用してサイズを制御します。画像の場合は、heightを100％に設定し、アスペクト比を維持するには：controls

<img src="myimage.jpg" alt="A beautiful sunset over the ocean">

ログイン後にコピー

ビデオの場合、<video>要素自体に同様のCSSを適用できます。

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

ログイン後にコピー

あるいは、width属性セットを100％に使用し、ブラウザーを自動的に処理させることができますが、この方法はブラウザーに応じてアスペクト比を歪めることがあります。アスペクト比を維持するには、一般的にmax-widthとheight: autoを使用することが推奨されます。 cssのdisplay: block;を使用すると、適切なアライメントが確保され、予期しない間隔の問題が防止されます。

html5のより速い読み込み時間のために画像とビデオの埋め込みを最適化するためのベストプラクティスは何ですか？いくつかのベストプラクティスを次に示します。

画像の最適化：要素または<picture>タグの属性）を使用してください。ビデオ圧縮ツールを使用して、ファイルサイズを縮小します。異なる帯域幅に応えるために、srcsetタグ内の<img>タグを使用して複数のビデオ解像度を提供することを検討してください。これは、ビューポートに表示されようとしている場合の画像やビデオのみをロードすることを意味します。これにより、初期ページの読み込み時間が大幅に短縮されます。これは、
タグ（ほとんどの最新のブラウザーでサポート）のような>などの属性またはJavaScriptライブラリを使用して実現できます。配信。 <source><video>
Webサーバーで適切なキャッシュヘッダーを構成して、ブラウザが画像やビデオをキャッシュできるようにし、それらを繰り返しダウンロードする必要性を軽減します。

以上がhtml5に画像やビデオを埋め込む方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。