HTML5+CSS3 |
Smartphone編
|
Lesson 13 | 応用編(4) スマートフォンサイトで動画を再生させる |
||||
制作・文 | 松田翔伍(株式会社ワン・トゥー・テン・デザイン) |
近年、サイト制作において、スマートフォンでも動画を再生させてほしいというオーダーが増えている。そんなときは、スマートフォン用にHTML5の新要素である<video>を使用すれば、最小限のソースで実装が可能だ。 |
動画を実装するには
最近は制作の際、このようなオーダーが増えている。ただ、PCと共通したソースで動画を実装するには、いろいろなブラウザ状況を考慮しなければならない。ユーザーによってはJavaScriptやFlashをオフにしている場合があるからだ。
そのようなユーザーに対しても、代替 要素を表示させ、コンテンツ欠如を避ける対策も行う必要がある。
大きく分けると【1】のようなパターンのときに対応が必要だ。
今回、Flash の表示にはswfobject.jsを使用する。swfobject.jsを使用すれ ば、Flashを表示させたいidを指定すると、そのid内にFlashが埋め込まれる。 JavaScriptやFlashがオフのときは、そのままid内のHTMLが表示されるので、ソースを汚さずに実装が可能、という大変優秀なライブラリだ。
このswfobject.jsの挙動を活かして、PC、スマートフォン対応の動画実装を行う。
【1】※IE9は<video>に対応しているため、モダンブラウザに含めている。◯付き数字ではなく、番号は(1)などで解説
JavaScriptファイルの
読み込み
まず、HTML の内にswfobject.js を読み込ませておく。
さらに、IE6などのHTML5非対応ブラウザ用にhtml5.jsも一緒に読み込ませる【2】。<video>などのHTML 要素に対応していないIEでは、不明な要素と認識され、エラーが発生するからだ。
その際、IEにしか効かないようにコメントアウトをしておく。そうすることで、モダンブラウザに無駄なjsが読み込まれることはなくなる。
【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()が呼ばれるように記述する。
ブロックとしての領域を確保
また、HTML5 要素はインライン要素として扱われるので、CSSで<video>にdisplay:blockをかけ、ブロックとしての領域を確保しておく【4】。
ブロック要素として多様しそうなタグはあらかじめCSSで一括指定しておくのもオススメだ【5】。
【3】HTML
【4】CSS
【5】CSS
Androidの場合の注意点
しかし、(7)の場合(Android)は注意が必要だ。Android 2.2以降はFlashが表示可能になるため、どちらを表示させるかによって、「Lesson08」で紹介したユーザーエージェントを使用して処理を切り分ける必要も出てくるが、今回はあくまでもPC=Flash、スマートフォン=videoという方法をとった。
【6】(1)の場合は、そのままFlashが表示される
【6】(3)、(5)の場合は、<video>に非対応なのでnoscript.jpgが表示される
【6】(2)、(4)の場合は、sample.m4vが表示され、動画形式非対応の場合はposter.jpgが表示される
【6】(6)の場合は、sample.m4v が表示され、動画形式非対応の場合はposter.jpgが表示される
【6】(7)の場合は、sample.m4v が表示され、動画形式非対応の場合はposter.jpgが表示される