videoタグの使い方や動画埋め込みのポイントをわかりやすく解説

2024.09.12
スポンサーリンク
スポンサーリンク

videoの概要

動画を埋め込む HTMLタグ

<video controls><source src=”video.mp4″ type=”video/mp4″></video>

概要 videoタグは、Webページに動画を埋め込むためのHTMLタグです。MP4、WebM、Oggなどのフォーマットが使用でき、controls属性を指定すると再生ボタンなどが表示されます。
  • Webページに動画を埋め込むために使用される。
  • 複数のsourceタグを使うことで、異なるフォーマットを提供可能。
  • controls属性を追加すると、ユーザーが操作できる再生ボタンが表示される。

videoタグで使用できる主な属性一覧

属性 説明 使用例
src 動画ファイルのURLを指定 <video src="video.mp4"></video>
controls 再生・停止ボタンなどの操作UIを表示 <video controls></video>
autoplay ページ読み込み時に自動再生 <video autoplay></video>
loop 動画を繰り返し再生 <video loop></video>
muted 音声をミュートにする <video muted></video>
poster 動画が再生される前に表示する画像を指定 <video poster="thumbnail.jpg"></video>
preload 動画のプリロード設定（auto, metadata, none） <video preload="metadata"></video>
width / height 動画の表示サイズを指定 <video width="640" height="360"></video>

videoタグの基本的な使い方

以下の例では、基本的なvideoタグを使って動画を埋め込んでいます。

<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    お使いのブラウザは動画タグをサポートしていません。
</video>

videoタグの応用：自動再生とミュート

以下の例では、動画をミュート状態で自動再生し、ループする設定をしています。

<video autoplay loop muted>
    <source src="background.mp4" type="video/mp4">
</video>

注意事項

  • すべてのブラウザで対応するフォーマットを提供するために、MP4・WebMなど複数の形式を用意するとよい。
  • 自動再生（autoplay）はブラウザの仕様により、muted属性がないと動作しないことがある。
  • 動画ファイルが大きい場合、読み込み時間が長くなるため、適切な圧縮を行うことが重要。
  • 動画の説明や字幕を提供する場合は、trackタグを使用するとアクセシビリティが向上する。

よくある質問

Q: videoタグで使用できる動画フォーマットは？
A: 主にMP4（H.264）、WebM、Ogg（Theora）が使用されます。MP4は最も広くサポートされています。
Q: autoplayが動作しないのはなぜですか？
A: ブラウザの仕様により、ユーザーの操作なしでは音声付き動画の自動再生がブロックされることがあります。muted属性を追加すると自動再生が有効になることが多いです。
Q: videoタグで字幕を追加する方法は？
A: trackタグを使い、WebVTT（.vtt）形式の字幕ファイルを指定できます。
Q: poster属性は何のために使いますか？
A: 動画の再生前に表示されるサムネイル画像を指定するために使用します。
Q: videoタグの代わりにYouTube動画を埋め込む方法は？
A: YouTubeのiframeタグを使用して埋め込むことができます。

まとめ

  • videoタグは、Webページに動画を埋め込むためのHTMLタグ。
  • 動画ファイルはsourceタグを使用して指定し、複数のフォーマットを提供できる。
  • 自動再生やループ再生、ミュートなどのオプションを指定できる。
  • 字幕やキャプションを追加する場合はtrackタグを使用するとよい。
  • 動画のサイズが大きい場合は、最適なフォーマットで圧縮し、ユーザーの負担を軽減する。
スポンサーリンク