video要素を使ってホームページで動画を再生する

HTML5ではYoutubeなどの外部サイトに頼らなくても、video要素を使うことでホームページに動画を埋め込むことが出来ます。

そのときに必要になるvideo要素や、動画の形式についてまとめました。

この記事では動画の編集方法やエンコードについては触れないのでご注意ください。

もっとも簡単なvideo要素

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

video要素はimg要素のように、動画のパスを指定するだけで埋め込むことが出来ます。

しかしこれだけだと動画を再生する方法がないので、ブラウザでは画像が表示されているだけの状態になります。

動画を再生するには属性をつける必要があります。

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

controls属性をつけることで、動画のコントローラを有効にして、動画を再生できるようにします。

source要素を使う

 上記のようなvideo属性は、ビデオのフォーマットを1種類しか指定できません。

一般的にvideo属性はブラウザサポートに合わせて複数のフォーマットを指定します。

<video src="media/penguin.webm" controls>
	<source src="media/penguin.mp4" type="video/mp4">
	<source src="media/penguin.webm" type="video/webm">
</video>

 video要素の子要素にsource要素を入れ子にすることでフォーマットを複数指定できます。

source要素にはファイルのパスと、フォーマットの種類を表すtype属性を指定します。

また、src属性の末尾に #t=10 と指定すると10秒地点から再生します。

メディアフォーマット

まず基礎知識としてsource要素の順番ですが、ブラウザは上から順番に優先的に読み込み、その時点で他のフォーマットは読み込まなくなるので、読み込ませたいフォーマットを一番上に指定します。

動画のメディアフォーマットには以下のものがあります。

形式	拡張子	概要
MP4	.mp4	ほとんどのブラウザでサポートされているフォーマット WebMよりも高画質
WebM	.webm	googleが開発したが、あまり広まっていない 「誰もが利用できる無料で高品質なウェブ向けビデオフォーマットの開発」というコンセプト
Ogg	.ogg	これといって特徴はありませんが、古いFirefoxで動作します

メディアフォーマットのブラウザサポート

MP4

ブラウザ	サポートしているバージョン
IE	Internet Explorer 9 以上
Firefox	Firefox 35 以上
Chrome	すべて
Safari	Safari 3.2 以上
Opera	Opera 25 以上

WebM

ブラウザ	サポートしているバージョン
IE	Internet Explorer：未対応 Microsoft EdgeHTML：EdgeHTML 14 以上
Firefox	Firefox 28 以上
Chrome	Google Chrome 25 以上
Safari	未対応
Opera	Opera 16 以上

Ogg

ブラウザ	サポートしているバージョン
IE	未対応
Firefox	Firefox 3.5 以上
Chrome	すべて
Safari	未対応
Opera	Opera 11.5 以上

video要素の属性について

属性	値	説明
src	url	動画ファイル
controls	無し	コントローラを表示
poster	url	ユーザー環境で表示できる動画がない代わりに表示する画像
autoplay	無し	動画の自動再生
loop	無し	ループ再生
preload	auto（デフォルト） metadata none	ページが読み込まれた時点から動画をロードを開始する
muted	無し	ミュート再生
width	数値	要素の幅
height	数値	要素の高さ

まとめ

video要素をつかってホームページに動画を設置する方法についてまとめました。

HTML5でvideo要素が登場してからは、トップページに動画を使ったサイトもよく見るようになりました。

動画の作成自体も、Creative Cloudのおかげで Premiere Pro など、プロ仕様のソフトが使えるようになったことでコストがだいぶ下がったと思います。

機会があれば挑戦してみたいですね。