Videoタグはつらいよ・・・
-
Upload
tatsuya-kosuge -
Category
Technology
-
view
286 -
download
1
Transcript of Videoタグはつらいよ・・・
Videoタグはつらいよ…2015.1.14
1,自己紹介
■コスゲタツヤ (@keinkosuge)
・Keinousの屋号で2014/10から活動・新宿にある某会社に常駐・デジタルハリウッドSTUDIO渋谷&新宿トレーナー・たまに渋谷にある日本料理屋「いまここ」でバイト
2,今回のお題のネタ元
http://shigi.net/shigimovieアーティスト「シギ」さんのスペシャルインタラクティブムービー。ショートムービーと厳選された詩(言葉)をランダムに流し、刹那を演出するBGMと共にアーティストの世界観を演出。
※41個用意されたムービーと言葉から毎回14個が抽出されるので、アクセスするたびに違うストーリーが組み立てられます。
3-1,作品制作の経緯
実は、初めて制作したのは1年前。当時、「プラグイン使える=JS使える」と勘違いしていたくらい「低レベル」だった僕。
色々なコードを駆使して、なんとか形にするものの…
悲惨な出来に・・・!!!
3-2,何が悲惨だったか?
・Chrome以外では満足に見られず。・Windows Vista以下では何のブラウザで見ても固まる。・IEでは真っ暗になる。
4,videoタグと戦うためのカギ、7連発!!
■Videoタグの対応ブラウザは?
IEは9以上。他のブラウザはたいてい問題なし。
ちなみにaudioは基本mp3があればいいが、Operaはmp3未対応。あとモバイルは勝手が違う、例えばiOSとかだと自動再生されないとか、全画面になるとか色々。
4,videoタグと戦うためのカギ、7連発!!
■必要な動画の拡張子は?
WebMとmp4(H264)があればOK。なんだか最近h264が標準になったという話もチラホラ聞きますが、今回は怖いのでWebMとH264両方使ってます。
4,videoタグと戦うためのカギ、7連発!!
■複数の拡張子の種類が必要なら、両方HTML上に書けばいいの?
動画の数が少ないならそれでいいけど、動画の数が多い場合はcreateElement()で必要な分だけvideoタグを作り(JS側でタグ生成して突っ込む)、modernizr.jsとか使って、ブラウザによって拡張子切り分ける方法をやりました。
4,videoタグと戦うためのカギ、7連発!!
■Videoタグ関連のイベントはどんなものがあるの??
色々なところで紹介されていましたが、下記URLを見るのが一番わかりやすいです。
http://www.w3.org/2010/05/video/mediaevents.html
(※今回は「ended」というイベントを使用し疑似的にループを実現しています)
4,videoタグと戦うためのカギ、7連発!!
■動画の変換は何のソフトを使えばいい?
色々試したけどAdobe Media Encoderが一番良かったです。使える人はPremierとかAfterEffectとか駆使して細かい編集すると良いです。
4,videoタグと戦うためのカギ、7連発!!
■動画(Videoタグ)は1ソースに何個まで使用出来るの?
ここでネックとなったのがIE(Internet Exploler)。最初は用意した動画41個、全てjsで動的に読み込むということをしていたが、IEだけ全然動画が再生されませんでした。。。
4,videoタグと戦うためのカギ、7連発!!
■動画(Videoタグ)は1ソースに何個まで使用出来るの?
動画の数を減らしてみたところ、14個とか15個くらいにした段階でエラーが全く起きなくなったのでIEのことを考えると、それくらいが使用できる限界っぽいです。
4,videoタグと戦うためのカギ、7連発!!
■結局、当初の問題は全部解決されたの?
一応それなりに低スペックのマシンでも試しましたが、不安定さは否めないのが実感。Videoタグの数が2〜3個くらいならそんなに問題はないと思われる。
ありがとうございました。