video

機能

video 要素は、ウェブページに動画コンテンツを埋め込むために使用されます。ユーザーは、ブラウザ内で動画を再生、停止、音量調整、フルスクリーン表示などの操作ができます。複数の動画フォーマットをサポートし、ブラウザの互換性を確保するために複数のソースを指定することができます。

よく設定する属性（attribute）と値

src

音声ファイルの URL を指定します。
例: src=“audiofile.mp3”

controls

プレーヤーのコントロール（再生、停止、音量調整など）を表示します。
例: controls

autoplay

ページの読み込み時に自動再生します。禁じ手です。 例: autoplay

loop

ループ再生します。
例: loop

muted

ミュート（無音）にします。　　 例: muted

poster

動画が再生される前に表示される画像の URL を指定します。
例: poster=“thumbnail.jpg”

preload

ファイルの読み込み方法を指定します。　　 例:

• preload=“auto”（自動で読み込む）
• preload=“metadata”（メタデータのみ読み込む）
• preload=“none”（読み込まない）

width

動画の表示幅を指定します。例: width=“640”

height

動画の表示高さを指定します。例: height=“360”

使い方

複数の属性を設定して、動画ファイルを自動再生し、ループ再生し、ミュートし、動画ファイルを自動で読み込むようにしています。また、複数の動画フォーマットを指定して、ブラウザの互換性を確保しています。 source 要素については必要に応じ検索してみてください。

<video
  controls
  autoplay
  loop
  muted
  preload="auto"
  poster="thumbnail.jpg"
  width="640"
  height="360"
>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  お使いのブラウザはvideo要素をサポートしていません。
</video>
コピー