videoタグはつらいよ・・・

Videoタグはつらいよ…2015.1.14

1,自己紹介

■コスゲタツヤ（@keinkosuge）

・Keinousの屋号で2014/10から活動・新宿にある某会社に常駐・デジタルハリウッドSTUDIO渋谷&新宿トレーナー・たまに渋谷にある日本料理屋「いまここ」でバイト

2,今回のお題のネタ元

http://shigi.net/shigimovieアーティスト「シギ」さんのスペシャルインタラクティブムービー。ショートムービーと厳選された詩（言葉）をランダムに流し、刹那を演出するBGMと共にアーティストの世界観を演出。

※41個用意されたムービーと言葉から毎回14個が抽出されるので、アクセスするたびに違うストーリーが組み立てられます。

3-1,作品制作の経緯

実は、初めて制作したのは１年前。当時、「プラグイン使える=JS使える」と勘違いしていたくらい「低レベル」だった僕。

色々なコードを駆使して、なんとか形にするものの…

悲惨な出来に・・・！！！

3-2,何が悲惨だったか？

・Chrome以外では満足に見られず。・Windows Vista以下では何のブラウザで見ても固まる。・IEでは真っ暗になる。

4,videoタグと戦うためのカギ、7連発！！

■Videoタグの対応ブラウザは？

IEは９以上。他のブラウザはたいてい問題なし。

ちなみにaudioは基本mp3があればいいが、Operaはmp3未対応。あとモバイルは勝手が違う、例えばiOSとかだと自動再生されないとか、全画面になるとか色々。


■必要な動画の拡張子は？

WebMとmp4（H264）があればOK。なんだか最近h264が標準になったという話もチラホラ聞きますが、今回は怖いのでWebMとH264両方使ってます。


■複数の拡張子の種類が必要なら、両方HTML上に書けばいいの？

動画の数が少ないならそれでいいけど、動画の数が多い場合はcreateElement()で必要な分だけvideoタグを作り（JS側でタグ生成して突っ込む）、modernizr.jsとか使って、ブラウザによって拡張子切り分ける方法をやりました。


■Videoタグ関連のイベントはどんなものがあるの？？

色々なところで紹介されていましたが、下記URLを見るのが一番わかりやすいです。

http://www.w3.org/2010/05/video/mediaevents.html

（※今回は「ended」というイベントを使用し疑似的にループを実現しています）


■動画の変換は何のソフトを使えばいい？

色々試したけどAdobe Media Encoderが一番良かったです。使える人はPremierとかAfterEffectとか駆使して細かい編集すると良いです。


■動画（Videoタグ）は１ソースに何個まで使用出来るの？

ここでネックとなったのがIE（Internet Exploler）。最初は用意した動画41個、全てjsで動的に読み込むということをしていたが、IEだけ全然動画が再生されませんでした。。。


■動画（Videoタグ）は１ソースに何個まで使用出来るの？

動画の数を減らしてみたところ、14個とか15個くらいにした段階でエラーが全く起きなくなったのでIEのことを考えると、それくらいが使用できる限界っぽいです。


■結局、当初の問題は全部解決されたの？

一応それなりに低スペックのマシンでも試しましたが、不安定さは否めないのが実感。Videoタグの数が２〜３個くらいならそんなに問題はないと思われる。

ありがとうございました。

videoタグはつらいよ・・・

Technology