【初心者向け】HTMLで動画を埋め込む方法：video・object・embedタグの使い方を徹底解説

HTMLドキュメントに動画を埋め込むには、<video>、<object>、<embed>という3つの要素を使用できます。それぞれ動作の仕組みが異なり、いずれもsrc属性などで動画ファイルのURLを指定します。

HTMLで動画を埋め込む場面とは

Webページを作成していると、ページ内に動画を埋め込みたくなることがあります。例えば、ケーキの焼き方を解説するチュートリアル記事を書いていて、レシピと一緒にハウツー動画を掲載したいようなケースです。

HTMLで動画を埋め込む方法はいくつかあります。このガイドでは、<video>、<object>、<embed>という3つのタグを使った埋め込み方法を、サンプルコード付きで順番に解説します。

1. <video>タグ（標準的でおすすめの方法）

HTML5には、Webページに動画を埋め込むための専用要素<video>が用意されています。比較的新しい要素のため、ごく一部の環境では対応していないこともありますが、現在の主要なブラウザのほとんどで問題なく動作します。

<video>要素では、主に「動画ファイルのソース」と「表示するコントロール」の2つを指定します。基本的な書き方は以下のとおりです。

<video controls="controls" src="videos/ourVideo.mp4">
	お使いのブラウザはvideo要素に対応していません。
</video>

上記の例では、src属性でvideos/ourVideo.mp4という動画ファイルを参照しています。さらにcontrols属性を指定すると、ブラウザ標準の再生コントロール（再生・一時停止ボタンなど）が表示されます。また、<video>タグ内に記述したテキストは、動画を再生できない環境で代替テキストとして表示されます。

複数のソースを指定する方法

ブラウザごとの対応フォーマットの違いに備えたい場合は、<source>要素を組み合わせて複数の動画ソースを指定できます。

<video controls="controls">
	<source src="videos/ourVideo.mp4" type="video/mp4">
	<source src="videos/ourSecondVideo.webm" type="video/webm">
	お使いのブラウザはvideo要素に対応していません。
</video>

このように記述すると、ブラウザは上から順に再生可能な形式を自動的に選択します。mp4のほかにも、webmやoggなど標準的な動画形式であれば<video>タグで利用できます。

2. <embed>タグ

<embed>要素を使うと、動画などのマルチメディアコンテンツをHTMLページに埋め込むことができます。以下は、Adobe Flash動画（.swfファイル）を参照する例です。

<embed src="videos/ourVideo.swf" width="600px" height="400px">

このコードを実行すると、Webページ上にFlash動画が表示されます。width属性とheight属性でプレーヤーのサイズを指定しており、この場合は600×400ピクセルで描画されます。

ただし、Flashコンテンツを再生するには、ユーザーの環境にFlash Playerがインストールされ、有効になっている必要があります。インストールしていないユーザーも多いため、動画が再生されない可能性がある点に注意しましょう。実際、Adobe Flashは2020年末にサポートを終了しており、現在は新規での利用が推奨されていません。

3. <object>タグ

<object>タグを使うと、さまざまな種類のメディアをHTMLページに埋め込めます。HTML5動画や音声、Flashリソース、PDFファイルなども、このタグで埋め込み可能です。以下は、動画を埋め込む際の使用例です。

<object data="videos/ourVideo.mp4" width="600px" height="400px"></object>

なお、<object>タグでFlashリソースを扱う場合も、ユーザー側にFlash Playerが必要です。どうしても<object>を使いたい場合でも、Flash未導入のユーザーのために<video>要素を併用するか、<video>への置き換えを検討しましょう。

まとめ

HTMLには、動画ファイルをWebページに埋め込むための要素として、<video>、<object>、<embed>の3つが用意されています。Webページに動画を追加したい場合は、これらのタグを活用しましょう。本記事では、各タグの基本的な使い方と、ブラウザやFlashとの互換性について解説しました。

特別な理由がない限り、最も標準的で互換性の高い<video>タグの使用をおすすめします。これで、どんなWebページにも動画を埋め込むための知識が身につきました！