HOMEPAGE TIPS BLOG

ホームページ制作TOP > Web技術Tips > video要素を使ってホームページで動画を再生する
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方
HTML5

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

HTML52016.11.04

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 など、プロ仕様のソフトが使えるようになったことでコストがだいぶ下がったと思います。

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

この記事は公開から 403 日経っているため、情報が古くなっている可能性があります。

PAGE TOP