video・audioタグ(メディアを埋め込む)

このレッスンでは、videoタグとaudioタグを使ったメディアの埋め込み方法を学び、HTML標準機能だけで再生機能を実現できるようになることを目標にします。「HTML video タグ 使い方」で調べている方向けです。

<video>と<audio>タグを使うと、動画や音声をページに埋め込めます。controls属性を付けると、再生・停止ボタンなどが自動で表示されます。以前はFlashなど別のプラグインが必要でしたが、今ではHTMLの標準機能だけで実現できます。

サンプルコードでは、<video>タグの中に<source src="movie.mp4" type="video/mp4">を指定し、対応していないブラウザ向けの代替テキストも用意しています。<audio>タグも同様の書き方で音声ファイルを埋め込めます。

初心者がよくつまずくのが、<source>タグを複数用意する意味です。ブラウザによって対応している動画・音声の形式が異なるため、複数の形式を用意しておくことで、より多くの環境で再生できるようにするのが目的です。1つの形式だけだと再生できない環境が出てくる可能性があります。

動画配信サイトのような再生機能を、複雑なプラグインなしで実現できるようになりました。教育コンテンツやプロモーション動画など、Webサイトにメディアを埋め込む場面は非常に多く、基本的な使い方を知っておくと役立ちます。