HTML5を楽しもう

作成2012年9月26日

改訂2012年10月9日

改訂2012年10月14日

改訂2012年10月22日

HTML5で映像コンテンツを楽しむ

１．HTML4とHTML5との違い

これまでのHTML4でも映像を楽しむことができる。HTML4では、OBJECT要素に、MediaPlayer、QuickTime、RealPlayerなどのプレイヤーを埋め込んで、映像コンテンツを閲覧することができた。HTML4での問題点は、使っているPCに該当するプレイヤーがないとき、プレイヤーをダウンロードし組み込むことが必要であった。その結果、プレイヤーのメーカーは、ブラウザーと同じように、そのPCで使う標準のプレイヤーとすべき、争いがあったように思う（利用者はあまり気にせず、使いたいものを使っていた）。

HTML5では、オーディオ（video／audio）要素（再生するためのプレイヤーも）が標準で搭載していて、簡単にオーディオ・コンテンツをページに組み込むことができる（但し、MPEG4の特許問題で、ブラウザー毎に再生できるオーディオ・フォーマットが若干異なる）。今回は、よく使われているMP4（他にもOGG、WebMがある）を利用して、映像コンテンツの埋め込み方法を紹介する。

HTML5はW3Cからまだ勧告の規格となっていないこと、またよく使われているInternetExploreもHTML5非対応のバージョンであるIE7、8がまだまだ多く利用されていること、このような中で、HTML5非対応のブラウザーでも、HTML5対応のブラウザーでも“映像コンテンツ”を楽しむ方法を検討する。

２． HTML5対応JavaScriptライブラリー

　HTML5非対応のブラウザー用に、いくつものJavaScriptライブラリーがあります。映像を楽しむためのライブラリーとして、オープンソースのVideoJS、MediaElement、商用版もあるflowplayer、JWPlayerなどなどがある。今回、ドキュメントが充実していたflowplayer、JWPlayerを用い、HTML5非対応のブラウザー、HTML5対応のブラウザーで実装を試みた。

３．「flowplayer」とは（http://flowplayer.org/）

「flowplayer」は、JavaScriptから簡単に使えるFlashメディアプレイヤーです。jQueryとの親和性は高く、JavaScriptで多彩な表現が可能である。

HTML5のvideo要素にも対応しているため、HTML5非対応のIE8などでも、簡単にvideo要素を用いたコンテンツ制作ができる。サンプルコード１に示すように（不思議なことに）、ヘッダーでscript宣言すれば、video要素が利用できる。コンテンツの中に、ちょっとビデオを埋め込みたい場合、大変手軽である。

「flowplayer」では、video要素を見つけると、video要素の内容をパースし、その内容をOBJECT要素を用いて、ビデオの埋め込みを行う。そこで、HTML5非対応ブラウザーが利用されている間は、HTML5対応ブラウザーとの共存、並行稼働が必要となる。video要素対応のブラウザーと非対応のブラウザーを判定し、scriptの埋め込みをダイナミックにバインドする／しないとを制御することで、長く利用できるページが出来上がる。

サンプルコード１の8行目で、IEの条件付きコメントを利用し、IE9まではflowplayerのJavaScriptでvideoタグを解釈して、IE9以上ではHTML5のvideoタグで、それぞれ動画表示を制御する。具体的には、下記の画面（左側がIE8、右側がIE9）でその様子が分かる。

サンプルコード１（HTML5への対応）

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>HTML5 video and audio tags in all major browsers</title>
<!--[if lt IE 9]>
	<script src="api/html5media.min.js"></script>
<![endif]-->
</head>
<body>
	<h1>HTML5 video was meant to be this easy</h1>
	<video class="video" poster="/samples/data/rhino.jpg" width="640" height="360" controls preload>
		<source src="/samples/data/rhino.mp4"/>	・・・IE、Chromeなどに対応
		<source src="/samples/data/rhino.ogv"/>	・・・FireFox対応
	</video>
</body>
</html>

デモサイト（https://www.osaka3t.com/samples/html5media/test.html）

IE7、IE8、IE9、FireFox、GoogleChrome、Androidで、動作を確認した。iOS上でも作動するらしいが、確認していない。

４．「JW Player」とは（http://www.longtailvideo.com/）

「JW Player」は、元々、Flashメディアプレイヤーをベースに、FLV/H.264/MP4/VP8/WebM/MP3/AAC/JPEG/PNG/GIFなどのフォーマットに対応したメディアプレイヤーであったらしい。

最新バージョンでは、Flash非対応のデバイスならば、HTML5が利用される仕組みが組み込まれていて、各種デバイスで動作する洗練されたメディアプレイヤーとなった。

機能としては、プレイリストによる順次再生、字幕表示、スキンによる画面デザインの変更などに対応している。うれしいことにvideo要素をサポートしていないIE8などのブラウザーでも、HTML5のvideo要素が利用できる。

最新のバージョンでは、“jQuery”ライブラリ依存が見た目なくなっている。

IE7、IE8、IE9、FireFox、GoogleChrome、Androidで、動作を確認した。iOS上でも作動するらしいが、確認していない。

サンプルコード２（HTML5対応）

「flowplayer」では、ヘッダーでのscript宣言だけでよかったが、「JW Player」でHTML5のvideo要素に対応する場合、video要素を発火するために、scriptによるおまじないが必要である。

<head>
	<script type="text/javascript" src="jwplayer.js"></script>
</head>
<body>
	<video id="container" width="480" height="270" poster="image.jpg">
		<source src="video.mp4"/>
	</video>
	<script type="text/javascript">
		jwplayer("container").setup({	//video要素のid属性を指定
			flashplayer: "player.swf"
		});
	</script>
</body>

サンプルコード３（JWPlayerのAPI）

「JW Player」のJavaScriptAPIを利用すると、簡単にプレイリストによるビデオ閲覧、更には、字幕付きにすることもできる。

<head>
	<script type="text/javascript" src="jwplayer.js"></script>
</head>
<body>
	<div id='mediaplayer'></div>
	<script type="text/javascript">
		jwplayer('mediaplayer').setup({		//上のdivのidを指す
			'flashplayer' : 'player.swf',	//Flashプレイヤーの指定
			'width' : '920',				//ビデオクリップの幅
			'height' : '480',				//ビデオクリップの高さ
			'playlistfile' : 'mmm.xml',		//プレイリストファイル
			'playlist.position' : 'right',	//ビデオの表示位置
			'playlist.size' : '250',		//プレイリストのコメント表示幅
			'repeat' : 'list',				//リストに従った再生
			'plugins' : 'viral,captions',	//字幕対応
			'viral.allowmenu' : 'false',	//コントロールバーからmenuの削除
			'viral.onpause' : 'false',		//このリストをオートプレイする（一番最初は例外）
			'viral.oncomplete' : 'false'	//現在のリストの再生が終わったら次のリストへ進む
		});
	</script>
</body>

デモサイト（https://www.osaka3t.com/samples/JWPlayer5/test.html）

なぜか、コンテンツを１つ飛ばして、再生することがある。サンプル中で、街中など人が映っている映像以外はすべて無音である。

JWPlayerでは、フルスクリーン表示しても、字幕が表示される。 IE7、IE8、IE9、FireFox、GoogleChrome、Androidで、動作を確認した。 Androidでは、字幕が表示できない。 iOS上でも作動するらしいが、確認していない。

これだけのコードで、映像コンテンツが楽しめるため、持っている動画に対して、このようなデータを作成すれば、楽しいビデオアーカイブを作ることができる。

●プレイリスト用XMLファイル

JWPlayerでは、プレイリストはRSSで記述する。

サンプルコード４（プレイリスト用XMLファイル）

<?xml version='1.0' encoding='utf-8'?>
<rss version="2.0" xmlns:jwplayer="http://developer.longtailvideo.com/trac/">
<channel>
	<title>JWPlayerのPlaylist</title>
	<item>
		<title>積乱雲</title>
		<description>猛暑が続いた夏。</description>
		<jwplayer:file>data/cloud.mp4</jwplayer:file>							・・・ビデオファイル
		<jwplayer:image>data/cloud.jpg</jwplayer:image>							・・・サムネール表示画像
		<jwplayer:duration>00:00:30</jwplayer:duration>
		<jwplayer:captions.file>data/cloud.caption.xml</jwplayer:captions.file>	・・・字幕ファイル
	</item>
</channel>
</rss>

●字幕用XMLファイル

字幕データはW3C TimedText (DFXP)に従い、下記のように、タイムコード上に字幕を記述する。字幕データ書式として、SubRip(SRT)の書式もあり、使い易いものを利用する。

サンプルコート５（字幕用XMLファイル）

<?xml version='1.0' encoding='utf-8'?>
<tt xmlns="http://www.w3.org/2006/10/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
	<styling>
		<style id="csize" tts:fontSize="20" tts:backgroundColor="transparent"/>
	</styling>
</head>
<body>
	<div>
		<p style="csize" begin="00:00:00" end="00:00:10">もくもくと、入道雲が育っています。</p>
		<p style="csize" begin="00:00:10" end="00:00:20">もっと大きくなると、ラピュタがあるのかも。</p>
	</div>
</body>
</tt>

５．字幕対応のブラウザーはまだない

W3CがHTML5で定義しているビデオコンテンツへの字幕付与形式は、サンプルコード６の通りである。現在のところ、この形式をサポートしているブラウザーはまだない。下記のコードに示すように（W3Cの規格によると）、字幕トラックが２つあり、アプリで字幕を切り替えることができるように設計されている。

VideoJS、MediaElementなどでは、JavaScriptでtrack要素を解釈し、字幕を表示できるものもある。字幕用のvttファイルには、スタイル情報がないため、APIで決められた表示形式に従い、字幕を表示する。

サンプルコード６（W3Cが決めているテキストトラックの宣言）

<video width="320" height="240" controls="controls">
	<source src="forrest_gump.mp4" type="video/mp4" />
	<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
	<track src="subtitles_ja.vtt" kind="subtitles" srclang="no" label="Japan">
</video>

６．HTML5のvideo関連のイベントとJavaScriptによる制御

video要素には、ビデオ再生に関わる各種イベントが用意されている。

メディア（video、audio）要素の操作に関するイベント

イベント名	イベント内容
loadstart	メディアデータの読み込みを開始した時
ended	メディアリソースの末尾に達して、再生が停止した時
timeupdate	現在の再生位置が変更された時
play	再生中の時
pause	一時停止中の時
ratechange	再生レートが変更された時
volumechange	ボリューム、または、ミュートが変更された時

サンプルコード７（JavaScriptによるvideoイベント制御）

<!-- ビデオ -->
<video id="v" width="400">
	<source src="http://download.blender.org/peach/trailer/trailer_480p.mov">
	<source type="video/ogg" src="http://download.blender.org/peach/trailer/trailer_400p.ogg">
</video>
<!-- メディアプレイヤー -->
<div id="controller">
	<button id="playOrPauseButton">再生</button>
	<button id="stopButton">停止</button>
	<input type="range" id="playback" disabled>
</div>
<script>
/*
	出典：HTML5のvideo/audio＋JavaScript APIテクニック
		http://www.atmarkit.co.jp/fwcr/design/benkyo/html5appli11/01.html
*/
// ビデオ要素
	var video = document.getElementById("v");
// 現在の再生位置を示すバー
	var playback = document.getElementById("playback");
// 再生／中断ボタン
	var playOrPauseButton = document.getElementById("playOrPauseButton");
// 停止ボタン
	var stopButton = document.getElementById("stopButton");

// ビデオのメタデータを読み込んだら、スライダーを利用可能にする
	video.addEventListener("loadedmetadata", function() {
		playback.disabled = false;
		playback.min = playback.value = video.initialTime || 0;
		playback.max = video.duration;
	}, false);

// 再生が開始されたら、ボタンのラベルを変更
	video.addEventListener("play", function() {
		playOrPauseButton.textContent = "中断";
	}, false);
// 一時中断されたら、ボタンのラベルを変更
	video.addEventListener("pause", function() {
		playOrPauseButton.textContent = "再生";
	}, false);
// 再生時間が変化するたび、スライダーの位置を更新
	video.addEventListener("timeupdate", function() {
		playback.value = video.currentTime;
	}, false);
// スライダーの値が変化したら、動画の再生位置を変更
	playback.addEventListener("change", function() {
		video.currentTime = this.valueAsNumber;
		}, false);
// 再生／中断ボタンを押された
	playOrPauseButton.addEventListener("click", function() {
		if (video.paused) {
			video.play();
		} else {
			video.pause();
		}
	}, false);

// 終了ボタンをクリックされたら、ビデオを一時停止し、再生位置を初期に戻す
	stopButton.addEventListener("click", function() {
		video.pause();
		video.currentTime = video.initialTime || 0;
	}, false);
</script>

７．HTML5で字幕付きビデオが表示できるか。

現在のHTML5では、字幕対応したブラウザーがないと言うことで、HTML5対応ブラウザー上で、JavaScriptによる字幕実装を行った。

timeupdateイベントを利用し、タイムラインに沿った字幕表示を試みる。

timeupdateイベントは、ビデオ・フレームごとに発出されるものではない。HTML5仕様では、timeupdateイベントの発出頻度を250ms以内と規定している。ブラウザーによってイベント実装は異なるものの、少なくとも250ms毎にタイムラインデータがチェックできるイベントである。

実装手順

（１）サンプルコード４のプレイリストを読み込む

（２）その中のitem要素を読み込む

（３）字幕データの読み込み

（４）ビデオコンテンツの表示、ビデオへのイベント組み込む

（５）timeupdateイベントに従い、字幕の表示

（６）endedイベントに従い、次のプレイリストへ

サンプルコード８

<video id="v" width="400">
	<source src="http://download.blender.org/peach/trailer/trailer_480p.mov">
	<source type="video/ogg" src="http://download.blender.org/peach/trailer/trailer_400p.ogg">
</video>

<script>
			・
//video要素へのイベント設定
	var v = document.querySelector('video'); 
//ビデオが終了したときのイベント
		v.addEventListener("ended", mdispX, false);
//再生時間変更に伴うイベント
		v.addEventListener("timeupdate", function(){timeupdate();}, false);
			・

//字幕ファイルの読み込み（サンプルコード５のXMLデータの読み込み）
var captions;
function caption_Result(xmlhttp){
	var xmlDoc=xmlhttp.responseXML;
	var xmlnode=xmlDoc.documentElement;
	if(xmlnode){
		var xnodes=xmlnode.getElementsByTagName("p");
		totals=xnodes.length;
		captions=new Array();
		for(var i=0;i<xnodes.length;i++){
			var s=xnodes.item(i).getAttribute("begin");
			var e=xnodes.item(i).getAttribute("end");
			var t=xnodes.item(i).firstChild.data;
			var c={'start':s,'end':e,'text':t};
			captions.push(c);
		}
	}
}

//字幕の表示
function timeupdate() {
	var v = document.querySelector('video'); 
	var now = v.currentTime; // 現在のビデオタイム
	var text = "", cap = "";
	for (var i = 0, len = captions.length; i < len; i++) {
		cap = captions[i];
		if (now >= cap.start && now <= cap.end){ // 現在のビデオタイムが、字幕の開始、終了時間内にあるかの判定
			text = cap.text; // 該当した字幕情報の保管
			break;
		}
	}
	document.getElementById('caption').innerHTML = text; // 字幕の表示
}
</script>

デモサイト（ https://www.osaka3t.com/samples/html5media/mm4.html ）~~Chrome Only~~

JWPlayerのプレイリストデータを用い、jQueryなどのツールに依存せず、HTML5＋JavaScriptのみの環境で、字幕表示ができた。併せて、スライドショー的に、映像をつないでいくことも実装した。 JWPlayer のプレイリスト表示では、１つのプレイヤーに対して、リスト従い順次表示を行うが、この実装では、１つのプレイヤーで１つの映像を再生し、再生が終わると、プレイヤー毎、消去することを行っている。ただし、フルスクリーン表示すると、字幕は表示されない。

~~IE9で作動確認したところ、video要素へ組み込んだイベント処理が、なぜか作動せず、字幕表示ができなかった。~~

　IE9では、ブラウザーのドキュメントモードの制御がうまくできていなかったため、うまく作動しなかった。

　ブラウザーIE9で、IE9モードで表示するためには、どのように設定したらよいのか（HTML5な人へ）（https://www.osaka3t.com/samples/ie/ie9.html）による実装方法によって、IE9モードの設定とIE9での不具合調整（IE9はシンタックスチェックが厳しいことによる）を経て、IE9でも、デモサイトを表示することができた。

　FireFoxでもデモサイトを表示することができる。FireFoxへの対応は、なかなか大変であった。と言うのも、FireFoxは、W3Cの規約に従いHTML5を実装しているようで、HTML4で使えたHTML-DOM制御が通らなかった。IEやChromeは、下位互換（HTML4）への対応を意識して温存しているように思う。下位互換をしないFireFoxは、冷たく感じる。

　FireFoxで作動させるため、映像のoggフォーマット、マウスイベントなどの対応を行った。

　iPad、Android4.0で作動を確認し、今回作成のコードがHTML5に対応したコードとなっていることを確認した。Androidではオートプレーせず、再生ボタンを押した。

　VideoJS、MediaElementのライブラリーなどは、track要素に従い、字幕表示することができる。複数のtrack要素を切り替え、対応する言語が表示できる。しかし字幕表示にCSSが利用できない。一方、作成したプログラムではいろいろな制御できるため、テロップのようなテレシネ表示、字幕のロール、L字表示、外部イベントによる字幕表示など多彩な表示ができる可能性がある。

８．ビデオファイルの変換処理

ビデオファイルの変換処理には、「XMedia Recode」を用いた。「XMedia Recode」は、GUIを通し、ビデオのビットレート、サイズ、フォーマット変換が簡単にできる。また、FLVからMP4などに変換ができ、大変重宝するツールである。

また、「Free Video Cutter」は、長いビデオを短くしたり、よい場面を切り出しに、大変便利である。

ビデオコンテンツは、当たり前であるが、画質を優先せず、コンパクトにリサイズにすることが必要である。

９．サーバー環境

Apache2.2.3（CentOS32bit　メモリ512MB）

Apacheへの設定

・ビデオファイルを扱う設定（必要なものを）

AddType video/mp4 .mp4

AddType video/ogg .ogv

AddType video/webm .webm

　・H264 Streaming Moduleを組み込む