HTML の video 要素を詳しく見る

HTMLのvideoビデオタグの詳しい説明

HTML5のvideoタグは、Webページ上で動画を再生するために使用されるタグです。 MP4、WebM、Ogg などのさまざまな形式を使用してビデオをレンダリングできます。この記事では、videoタグの使い方を詳しく紹介し、具体的なコード例を示します。

1. 基本構造
   video タグの基本構造は次のとおりです:

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

上の例では、ビデオ ファイル (video) へのパスを指定しました。 .mp4) を作成し、ビデオの上にコントロール ボタン (再生、一時停止、音量調整など) を表示するための control 属性を追加しました。ブラウザが video タグをサポートしていない場合は、フォールバック コンテンツが表示されます (お使いのブラウザは video タグをサポートしていません)。

2. 属性の詳細説明
   2.1 src 属性
   src 属性は、ビデオ ファイルのパスを指定するために使用されます。相対パスまたは絶対パスを使用できます。例:

<video src="video.mp4">
</video>

2.2 Controls 属性
controls 属性は、ビデオのコントロール ボタンを表示するために使用されます。例:

<video src="video.mp4" controls>
</video>

2.3 幅と高さの属性
幅と高さの属性を使用して、ビデオの幅と高さをカスタマイズします。例:

<video src="video.mp4" width="640" height="360">
</video>

2.4 autoplay 属性
autoplay 属性を使用して、ビデオが自動的に再生されるように設定します。例:

<video src="video.mp4" autoplay>
</video>

2.5 ループ属性
loop 属性を使用してビデオをループに設定します。例:

<video src="video.mp4" loop>
</video>

2.6 ミュート属性
ミュート属性を使用して、ビデオをサイレント再生するように設定します。例:

<video src="video.mp4" muted>
</video>

3. サポートされるビデオ形式
   video タグは複数のビデオ形式をサポートしますが、ブラウザによってサポートされる形式は異なる場合があります。一般的に使用されるビデオ形式と、対応するブラウザのサポートを次に示します。

• MP4: ほとんどのブラウザでサポートされます
• WebM: ほとんどの最新のブラウザでサポートされます
• Ogg: Firefox、Chrome およびその他のブラウザのサポート

ビデオをさまざまなプラットフォームやブラウザで正常に再生できるようにするには、ビデオ ソースを複数の形式で同時に提供することが最善です。

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

4. 埋め込み字幕
   track タグを使用すると、video タグに字幕ファイルを埋め込むことができます。例:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" label="English" srclang="en">
  Your browser does not support the video tag.
</video>

上の例では、track タグを使用して字幕ファイル (subtitles.vtt) を埋め込み、いくつかの関連パラメータ (kind、label、srclang) を追加しました。

概要:
video タグを使用すると、Web ページにビデオを簡単に埋め込んで再生できます。さまざまな属性を使用して、ビデオの自動再生、ループ、ミュート、その他の動作を制御できます。ビデオの互換性を確保するには、ビデオ ソースを複数の形式で同時に提供することが最善です。さらに、track タグを使用して字幕ファイルを埋め込むこともできます。

この記事の導入により、読者は video タグについてより深く理解し、自分の Web ページに効果的に適用できるようになると思います。この記事がお役に立てば幸いです!

以上がHTML の video 要素を詳しく見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。