Lesson 13 応用編(4) スマートフォンサイトで動画を再生させる - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編

2011.9.20 TUE

HTML5＋CSS3
次世代Webコーディングの
超・最新動向

Smartphone編

	Lesson 13			応用編(4) スマートフォンサイトで動画を再生させる
	制作・文			松田翔伍（株式会社ワン・トゥー・テン・デザイン）

近年、サイト制作において、スマートフォンでも動画を再生させてほしいというオーダーが増えている。そんなときは、スマートフォン用にHTML5の新要素である<video>を使用すれば、最小限のソースで実装が可能だ。

動画を実装するには

「PCはFlashを使用してリッチな動画コンテンツに。ただ、スマートフォンでも簡単な動画は見せたい。」

最近は制作の際、このようなオーダーが増えている。ただ、PCと共通したソースで動画を実装するには、いろいろなブラウザ状況を考慮しなければならない。ユーザーによってはJavaScriptやFlashをオフにしている場合があるからだ。

そのようなユーザーに対しても、代替要素を表示させ、コンテンツ欠如を避ける対策も行う必要がある。

大きく分けると【1】のようなパターンのときに対応が必要だ。

今回、Flash の表示にはswfobject.jsを使用する。swfobject.jsを使用すれば、Flashを表示させたいidを指定すると、そのid内にFlashが埋め込まれる。 JavaScriptやFlashがオフのときは、そのままid内のHTMLが表示されるので、ソースを汚さずに実装が可能、という大変優秀なライブラリだ。

このswfobject.jsの挙動を活かして、PC、スマートフォン対応の動画実装を行う。

【1】※IE9は<video />に対応しているため、モダンブラウザに含めている。

【1】※IE9は<video>に対応しているため、モダンブラウザに含めている。◯付き数字ではなく、番号は(1)などで解説

JavaScriptファイルの
読み込み

まず、HTML の内にswfobject.js を読み込ませておく。

さらに、IE6などのHTML5非対応ブラウザ用にhtml5.jsも一緒に読み込ませる【2】。<video>などのHTML 要素に対応していないIEでは、不明な要素と認識され、エラーが発生するからだ。

その際、IEにしか効かないようにコメントアウトをしておく。そうすることで、モダンブラウザに無駄なjsが読み込まれることはなくなる。

【2】サンプルファイル（index.html）

【2】HTML

動画部分の記述

次に、肝となる動画部分を記述する。

<video>にはswfobject.js 用にidを割り振っておく。さらに、<video>内に読み込ませる動画とJavaScriptオフ用の画像を記述する。

<video>内は上から順に読み込まれるため、<video>に対応していて、さらに動画形式も対応していればsample.m4vを、<video>非対応ならnoscript.jpg が表示されるという寸法だ。

<video>には対応しているが、動画形式に対応していない場合はposter.jpgが表示される。posterとは動画非対応時や動画再生前に表示されるキャプチャ画像である。

※ Androidの<video>は再生する際にvideo.play()を呼び出す必要があるため、if文でAndroidの時のみ、<video>クリック時にaddEventListenerでvideo.play()が呼ばれるように記述する。

ブロックとしての領域を確保

最後にswfobject.js 用の記述を追加しておく【3】。

また、HTML5 要素はインライン要素として扱われるので、CSSで<video>にdisplay:blockをかけ、ブロックとしての領域を確保しておく【4】。

ブロック要素として多様しそうなタグはあらかじめCSSで一括指定しておくのもオススメだ【5】。

【3】HTML

【4】CSS

【5】CSS

Androidの場合の注意点

これで、全パターンに対応することができる【6】。

しかし、(7)の場合（Android）は注意が必要だ。Android 2.2以降はFlashが表示可能になるため、どちらを表示させるかによって、「Lesson08」で紹介したユーザーエージェントを使用して処理を切り分ける必要も出てくるが、今回はあくまでもPC＝Flash、スマートフォン＝videoという方法をとった。