Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Videoタグはつらいよ…
2015.1.14
1,自己紹介
■コスゲタツヤ (@keinkosuge)
・Keinousの屋号で2014/10から活動
・新宿にある某会社に常駐
・デジタルハリウッドSTUDIO渋谷&新宿トレーナー
・たまに渋谷にある日本料理屋「いまここ」でバイト
2,今回のお題のネタ元
http://shigi.net/shigimovie
アーティスト「シギ」さんのスペシャルインタラクティブムービー。
ショートムービーと厳選された詩(言葉)をランダムに流し、
刹那を演出するBGMと共にアーティストの世...
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側で...
4,videoタグと戦うためのカギ、7連発!!
■Videoタグ関連のイベントはどんなものがあるの??
色々なところで紹介されていましたが、下記URLを見るのが一番わかりやすいです。
http://www.w3.org/2010/05/vide...
4,videoタグと戦うためのカギ、7連発!!
■動画の変換は何のソフトを使えばいい?
色々試したけどAdobe Media Encoderが一番良かったです。
使える人はPremierとかAfterEffectとか駆使して細かい編集すると良い...
4,videoタグと戦うためのカギ、7連発!!
■動画(Videoタグ)は1ソースに何個まで使用出来るの?
ここでネックとなったのがIE(Internet Exploler)。
最初は用意した動画41個、全てjsで動的に読み込むということをして...
4,videoタグと戦うためのカギ、7連発!!
■動画(Videoタグ)は1ソースに何個まで使用出来るの?
動画の数を減らしてみたところ、14個とか15個くらいにした段階で
エラーが全く起きなくなったのでIEのことを考えると、
それくらいが使用...
4,videoタグと戦うためのカギ、7連発!!
■結局、当初の問題は全部解決されたの?
一応それなりに低スペックのマシンでも試しましたが、
不安定さは否めないのが実感。
Videoタグの数が2〜3個くらいならそんなに問題はないと思われる。
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Videoタグはつらいよ・・・

906 views

Published on

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

Published in: Technology
  • DOWNLOAD THAT BOOKS/FILE INTO AVAILABLE FORMAT - (Unlimited) ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes Christian, Classics, Comics, Contemporary, Cookbooks, Art, Biography, Business, Chick Lit, Children's, Manga, Memoir, Music, Science, Science Fiction, Self Help, History, Horror, Humor And Comedy, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Videoタグはつらいよ・・・

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

×