2015.1.14 HTML5minutesで登壇した際に使用したスライドです。

1. Videoタグはつらいよ…
2015.1.14

2. 1,自己紹介
■コスゲタツヤ （@keinkosuge）
・Keinousの屋号で2014/10から活動
・新宿にある某会社に常駐
・デジタルハリウッドSTUDIO渋谷&新宿トレーナー
・たまに渋谷にある日本料理屋「いまここ」でバイト

3. 2,今回のお題のネタ元
http://shigi.net/shigimovie
アーティスト「シギ」さんのスペシャルインタラクティブムービー。
ショートムービーと厳選された詩（言葉）をランダムに流し、
刹那を演出するBGMと共にアーティストの世界観を演出。
※41個用意されたムービーと言葉から毎回14個が抽出されるので、
アクセスするたびに違うストーリーが組み立てられます。

4. 3-1,作品制作の経緯
実は、初めて制作したのは１年前。
当時、「プラグイン使える=JS使える」と
勘違いしていたくらい「低レベル」だった僕。
色々なコードを駆使して、なんとか形にするものの…
悲惨な出来に・・・！！！

5. 3-2,何が悲惨だったか？
・Chrome以外では満足に見られず。
・Windows Vista以下では何のブラウザで見ても固まる。
・IEでは真っ暗になる。

6. 4,videoタグと戦うためのカギ、7連発！！
■Videoタグの対応ブラウザは？
IEは９以上。他のブラウザはたいてい問題なし。
ちなみにaudioは基本mp3があればいいが、Operaはmp3未対応。
あとモバイルは勝手が違う、例えばiOSとかだと自動再生されないとか、全画面になるとか色々。

7. 4,videoタグと戦うためのカギ、7連発！！
■必要な動画の拡張子は？
WebMとmp4（H264）があればOK。
なんだか最近h264が標準になったという話もチラホラ聞きますが、
今回は怖いのでWebMとH264両方使ってます。

8. 4,videoタグと戦うためのカギ、7連発！！
■複数の拡張子の種類が必要なら、両方HTML上に書けばいいの？
動画の数が少ないならそれでいいけど、動画の数が多い場合はcreateElement()で
必要な分だけvideoタグを作り（JS側でタグ生成して突っ込む）、
modernizr.jsとか使って、ブラウザによって拡張子切り分ける方法をやりました。

9. 4,videoタグと戦うためのカギ、7連発！！
■Videoタグ関連のイベントはどんなものがあるの？？
色々なところで紹介されていましたが、下記URLを見るのが一番わかりやすいです。
http://www.w3.org/2010/05/video/mediaevents.html
（※今回は「ended」というイベントを使用し疑似的にループを実現しています）

10. 4,videoタグと戦うためのカギ、7連発！！
■動画の変換は何のソフトを使えばいい？
色々試したけどAdobe Media Encoderが一番良かったです。
使える人はPremierとかAfterEffectとか駆使して細かい編集すると良いです。

11. 4,videoタグと戦うためのカギ、7連発！！
■動画（Videoタグ）は１ソースに何個まで使用出来るの？
ここでネックとなったのがIE（Internet Exploler）。
最初は用意した動画41個、全てjsで動的に読み込むということをしていたが、
IEだけ全然動画が再生されませんでした。。。

12. 4,videoタグと戦うためのカギ、7連発！！
■動画（Videoタグ）は１ソースに何個まで使用出来るの？
動画の数を減らしてみたところ、14個とか15個くらいにした段階で
エラーが全く起きなくなったのでIEのことを考えると、
それくらいが使用できる限界っぽいです。

13. 4,videoタグと戦うためのカギ、7連発！！
■結局、当初の問題は全部解決されたの？
一応それなりに低スペックのマシンでも試しましたが、
不安定さは否めないのが実感。
Videoタグの数が２〜３個くらいならそんなに問題はないと思われる。

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