【HTML5】各デバイス・ブラウザごとの動画再生環境調査

これまでPC用ページではFlashプレイヤーで動画を再生するのが一般的だった。

iPadなどのタブレット端末でPC用ページを表示させたい場合、
多くのタブレット端末(iOS/Android)にFlashプレイヤーがインストールされていない為、
こういったFlashに対応していない端末では動画を再生させる事ができない

Flashに対応していない端末で動画を再生させるには、
HTML5の"<video>タグ"を利用しブラウザのプレイヤーを利用するか、
独自にプレイヤーを開発するかということになる。

独自にプレイヤーを開発する事は難しいので、今回はHTML5の"<video>タグ"について調査してみた。

まずは各端末・ブラウザごとに異なる動画形式のものをすべて実機で検証してみる。

HTML5"<video>タグ"各端末・ブラウザ別対応動画形式一覧

video001

この検証結果により、"<video>タグ"を使用する場合は、MP4WebMの2点を用意すれば、ほぼすべてのブラウザに対応できることがわかった。

・MP4形式動画
(映像コーデック:H.264、音声コーデック:AAC)メタデータ無し
・WebM形式動画
(映像コーデック:VP8、音声コーデック:Vorbis)メタデータ無し

MP4とWebM形式の動画ファイルを用意すればIE8以下を除く全端末・全ブラウザに対応する事ができる。

"<video>タグ"を利用する際のIE6~8対策

IE6~8ではブラウザにプレイヤーが搭載されていない為、
"<video>タグ"を利用しても動画を再生することはできない。

なので、IE6~8の"<video>タグ"をFlashプレイヤーで再生してくれるオープンソース"html5media"を使用する。

使用方法

HTMLファイルにJavaScriptの記述を追加する。

<script type="text/javascript" src="http://api.html5media.info/1.1.5/html5media.min.js"></script>

IE6~8で"<video>タグ"を利用した際はFlashプレイヤーで再生される。

.htaccessの記述

サーバの設定によっては、ファイルの拡張子をMIME-typeにマップしなければ動画が再生できない場合がある。
その際は.htaccessに下記の通りAddTypeディレクティブを記述して対応する。

AddType video/ogg .ogg .ogv
AddType video/webm .webm
AddType video/mp4 .mp4

各種プラットフォームに対応した基本フォーマット

<video preload="none" poster="xxx.jpg" controls width="xxx" height="xxx">
	<source src="xxx.mp4">
	<source src=" xxx.webm">
	<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

"<video>タグ"記述の際の注意事項

1.スマートフォンでは動画が自動で読み込まれる設定にしているとページのスクロールがカクつくなどし、ストレスが溜まる原因となる。
デフォルトでは"<video>タグ"のpreload属性が「auto」(自動読み込み有り)になっているので、「none」(自動読み込み無し)を設定すれば、ページの読み込みの際に動画を自動で読み込まなくて済む。

<video src="動画ファイル名" preload="none"></video>

2.動画再生前はiPhoneでは動画の頭の画が自動でサムネイルとして表示されるが、現行Androidでは自動でサムネイルを生成する機能がない為、真っ黒な状態となり標準のビデオアイコンが表示される。
そのためサムネイル用のJPEG画像を用意し、poster属性に設定する必要がある。

<video src="動画ファイル名" poster="サムネイル画像名"></video>

3.通常、スマートフォンでは再生時に動画が自動でフルスクリーン表示となり、シークバーや一時停止ボタンなどのコントローラーが表示される。
しかし、iPadなどのタブレット端末ではフルスクリーン表示とならず、同ページ内で動画が再生される。
ユーザによってはフルスクリーンで見たい場合や、シークバーで再生のコントロールがしたい場合があると思われるため、controls属性を設定しておくことが好ましい。

<video src="動画ファイル名" controls width="xxx" height="xxx" ></video>

4.万が一、"<video>タグ"未対応端末にて動画が表示されなかったときのため、未対応の旨をメッセージとして記述しておく。

5.iPhoneではサムネイル画像の左右に黒みが表示される。

"<video>タグ"のwidth・heightに値を指定することにより消すことができる。

6.MP4とWebM(もしくはMP4とOGV)の2種類の動画を用意した場合、コードを記述する順番は①MP4 ②WebM(OGV)とする。

Webブラウザごとに動画再生する優先順位がある為、上記の順番でなければ動画が再生されないことがある。

【HTML5】IEドキュメントモード(Quirksモード)対策

HTML5で制作しているウェブサイトをIE8・IE9でみるとレイアウトが崩れている。
文法など記述は間違っていないので、IEを疑って調べてみると、
IE上でhtml5(を宣言した時)の挙動がどうもおかしいらしい。

IE8やIE9には、ブラウザモードとドキュメントモードという2つのモードがあって、
このドキュメントモードが悪さをしている事が判明。

IEドキュメントモード

ドキュメントモードは、HTML上の”DOCTYPE宣言”の記述に従って自動選択されるらしいが、
どうやらIEではhtml5で<!DOCTYPE HTML>を宣言するとQuirksモード(IE5/IE6)に判定されてしまう。

しかし、IEではHTMLでドキュメントモードを指定できる”meta”タグが用意されているので、コチラで対応する。

<meta http-equiv="X-UA-Compatible" content="IE=8 ; IE=9" />

上記の例では、IE8で参照したらドキュメントモードをIE8標準モード、IE9で参照したらIE9標準モードが選択される。

【HTML5】videoタグの動画がFirefoxで動かない対処法

HTML5のvideoタグで再生される動画のフォーマットが、現状ブラウザによってバラバラになっている。
(サポートされている動画規格が統一されていない。)

【videoタグ使用例】

<video controls autoplay poster="firstimg.jpg" width="320" height="240">
	<source src="sample.mp4" />
	<source src="sample.ogv" />
	<source src="sample.webm" />
</video>

HTML5のvideoタグで動画が再生されるファイル形式はのうち、
FireFoxで現在標準となっている.ogvファイルOgg形式ファイルとして
設定されていないサーバーが多い。

今回はhtmlファイルと同じディレクトリ内に「.htaccess」を作って
下記のコードを記述して対応する。

【.htaccess記述例】

AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

mp4形式などもサーバー設定によっては別途対応する必要がある。

【HTML/CSS】ヘッダーをページ上部に固定してレイアウトする

ヘッダー部分をスクロールしてもページ上部に固定されたままコンテンツ部分のみスクロールするようにレイアウトする。

今回の仕様は、ヘッダー部分をポジションで固定(絶対位置に配置)して、ヘッダーの高さ分だけ、コンテンツ上部にマージンを持たせる事で実現する。

【test.html】

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>header固定テスト</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/test.css">

<!--[if IE]>
<script type="text/javascript">
	document.createElement('header');
	document.createElement('section');
	document.createElement('nav');
	document.createElement('footer');
</script>
<![endif]-->  
	
</head>
<body>

<header>
	<section id="header">
		<h1>タイトル/header固定テスト</h1>
		<nav></nav>
	</section>
</header>

<div id="contents">
コンテンツ<br />
コンテンツコンテンツ<br />
コンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツコンテンツ<br />
	・
	・
	・
	・
	・
コンテンツコンテンツ<br />
コンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツ<br />
コンテンツコンテンツコンテンツコンテンツコンテンツ<br />
</div>

<footer>
	<p>footer</p>
</footer>

</body>
</html>

【css/test.css】

body{  
    padding-top: 100px;
	background: #CCCCCC;
}  

header{
	position: fixed !important;  
	position: absolute;  
	top: 0;  
	left: 0;
	width: 100%;
	height: 100px;
	margin: 0 auto;
	background: #000000;
}

header section#header{
	width: 1000px;
	margin: 0 auto;
}

header section#header h1{
	color: #FFFFFF;
}

#contents{
	width: 1000px;
	margin: 0 auto;
	border: 1px solid #333333;
	background: #FFFFFF;
}

footer{
	width: 1000px;
	height: 80px;
	margin: 0 auto;
	background: #000000;
	color: #FFFFFF;
	text-align: center;
}

position: fixed;は絶対位置への配置、スクロールしても位置を固定する。

【出力結果】

ヘッダーをページ上部に固定する

【CSS3】メディアクエリ指定でデバイスの横幅ごとに表示を切り替える

CSS3ではユーザのブラウザやデバイスの情報を取得することができるようになり、それに対応したスタイルの適用が可能になった。
これにより、ひとつのHTMLファイルで複数のデバイスに対応できるようになった。

CSS3のメディアクエリ(@media)を使ってデバイスの横幅ごとにデザインを切り替えてみる。
今回は、1,000px以上をPC・タブレット(横)、1,000px以下をタブレット(縦)、480px以下をスマートフォン(横)(縦)と想定してスタイルを指定してみる。

/* 基本値 1001px以上(PC・タブレット横) */
div#contents {

}
/* 480px以上、1000px以下(タブレット縦) */
@media screen and (min-width: 481px) and (max-width: 1000px) {
	div#contents {

	}
}
/* 480px以下(スマートフォン縦・横) */
@media screen and (max-width: 480px) {
	div#contents {

	}
}

実際に試してみる。
【index.html】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<title>title</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<!-- page content -->
<div id="contents">
<h1><img src="img/common/img_head.gif" width="100%"/></h1>
	<ul id="main_menu">
		<li class="mainMenu">メニュー1</li>
		<li class="mainMenu">メニュー2</li>
		<li class="mainMenu">メニュー3</li>
		<li class="mainMenu">メニュー4</li>
		<li class="mainMenu">メニュー5</li>
		<li class="mainMenu">メニュー6</li>
		<li class="mainMenu">メニュー7</li>
		<li class="mainMenu">メニュー8</li>
		<li class="mainMenu">メニュー9</li>
		<li class="mainMenu">メニュー10</li>
	</ul>
</div>
</body>
</html>

【common.css】

/* 基本値 1001px以上(PC・タブレット横) */
div#contents {
	width: 980px;
	margin: auto;
}
ul#main_menu {
	display: block;
	width: 100%;
	height: 50px;
}
ul#main_menu li.mainMenu{
	display: block;
	float: left;
	color: #FFFFFF;
	width: 10%;
	height: 50px;
	line-height: 50px;
	background: #000000;
	text-align: center;
}
/* 480px以上、1000px以下(タブレット縦) */
@media screen and (min-width: 481px) and (max-width: 1000px) {
	div#contents {
		width: 100%;
	}
	ul#main_menu li.mainMenu{
		width: 20%;
		height: 50px;
		line-height: 50px;
		background: #0000FF;
	}
}
/* 480px以下(スマートフォン縦・横) */
@media screen and (max-width: 480px) {
	div#contents {
		width: 100%;
	}
	ul#main_menu li.mainMenu{
		width: 50%;
		height: 50px;
		line-height: 50px;
		background: #FF0000;
	}
}

【実行結果】

メディアクエリ

ウィンドウの横幅を縮めると、ウィンドウの横幅に応じてそれぞれ指定したスタイルが適応される。