Home > Design > HTML5とCSS3でビデオバックグラ…

HTML5とCSS3でビデオバックグラウンド実装

Posted on by

今日は、友馬です。
昨今、ちょいちょいPC向けのサイトで活用されている、映像を背景にしようするデザイン手法を試してみました。

作成したデモはこちら。
HTML5でビデオバックグランドを実装

作成手順

  • HTML5のVideoタグについて
  • mp4,webmファイルの作成
  • マークアップ

HTML5のVideoタグについて

バックグラウンドで動画を自動再生するには何通りか実装方法がありますが、今回はHTML5のVideoタグを使用します。これ以外にもJavascriptのプラグインを利用する方法などはまた別途、紹介しようと思います。

ちなみに、今回の実装方法の場合、というか今のところスマートフォン（特にiOS）はビデオの自動再生に対応していないそうです。なので基本的に、ビデオバックグラウンドはPC/Macで閲覧するサイトで利用できる手法となります。

mp4(h264),webmファイルの作成

とりあえず、最新の大体のブラウザに対応するにはh264のmp4ファイルとWebmファイルがあれば良いっぽいです。

という事で、まずはバックグラウンドに使用する動画を手に入れます。自作しても良いのですが、今回はAfter Effects Style｜素材からダウンロードしました。

webm形式ファイルの変換

Webm形式の動画ファイルの作成には、動画変換ソフトを利用します。調べてみたところ、Miro Video Converterが一番使い勝手が良さそうでしたので、これを使ってみます。

Miro Video Converter

やり方はすこぶる簡単です。 該当のファイルを選択し、ファイル形式を選択して書き出すだけ。

miro video converterを使ってファイルを変換

無事、Webmファイルを変換できたら下準備は完了です。

マークアップ

マークアップは至ってシンプルです。
今回はせっかくなので、上にのせるコンテンツの背景にストライプを入れました。
こんな感じでちょっとした画像をかぶせるておくと、画質の悪い動画を利用している時もいい感じの雰囲気を作れるかもしれませんね。

HTML

<section>
  コンテンツ
</section>
<video autoplay loop>
  <source src="../media/movies/sample.mp4">
  <source src="../media/movies/sample.webm">
</video>

CSS

video {
	min-width: 100%;
	min-height: 100%;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 0;
}
section {
	margin: 10px;
	padding: 10px;
	position: relative;
	z-index: 1;
	background: url(stripe.png) repeat;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.1);
}

参考:

HTML5とCSS3での実装事態は結構シンプルでしたが、ここからIEの古いバージョンに対応させたり、ブラウザの幅によって動画のサイズを変更したりするにはもう少し手間をかける必要があります。
それに関しては今後、研究がてら色々と試していこうと思います。

コメントを残す