tuglog!tuglog!Webデザイナー目線でいろいろなWebに関する情報やライフハック的な情報発信を。時にはアートに、時にアナログに。-----------------------------------------------------ギャラリーサイトはこちらツイッターもやってます。プランニングからデザイン、そしてシステム構築まで。Webの「仕事」がトータルに理解できるプロフェッショナル養成講座。shinjiboss最近知人のサイトを手伝っていて悩んだので個人的な覚書をかねてのエントリーです。テーマはiPad、iPhoneとPCブラウザ、両方での動画閲覧です。2,940(2010-02-25)iPad、iPhoneでの動画再生を考えた場合、HTML5コーディングが必要です。そこではじめにVideoタグを使用して、HTML5に未対応のブラウザに関しては代替えFLVを用意する方法で開始。ブラウザ間で採用コーデックが定まっていないこれは将来的には解決されそうな問題ですが、現時点で各ブラウザがサポートしているコーデックは統一されていません。(2010.10.19現在)GoogleがHTML5のオープンなコーデック規格としてWebMを発表していますが、Appleがサポートしない方針を示しており、まだまだ共通したコーデックが使用できる状況ではないようです。WebM以外で対応しているコーデックの対応表はこちら。このコーデック問題で、HTML5でコーディングしても対応コーデック分の動画を用意することになり、せっかくのVideoタグも有効に活用できません。そのため、PCブラウザ側は従来道理FLVで再生、iPad、iPhone再生の場合にFLVの代替えとしてVideoタグでの埋め込みというやり方に変更することにしました。具体的には次のとおり。SWFObject.jsを使用しFlashを埋め込みます。SWFObjectはバージョン2.2を使用しています。></script><head>内でスクリプト読み込みます。width="320"></video></div>SWFObjectの基本的な使用方法はこちらを参照ください。Player」を使用しています。Playerhttp://flv-player.net/今回はこのフリーのFLVスキンを使用しているためこんなソースになっています。使用するスキンやFlashの設定により埋め込みソースは異なりますので気をつけてください。ソースを見るとすぐにわかりますが、SWFObject.jsで指定したid(この場合は”flash”)にjavascriptによってFlashが埋め込まれます。id="flash"></div>の間に画像や、テキストなどをいれて、FlashPlayerがインストールされていない場合の対処をします。今回はそこにVideoタグでムービーを埋め込み、Flashに対応していないiPad、iPhoneに対処した感じです。この方法だと、PCブラウザ毎にコーデック違いのムービーを用意する必要もありません。通常再生用のFLVムービーと、iPad、iPhone向けの動画を準備するだけですみます。iOSには標準ブラウザとしてsafariが搭載されていますので、iPad、iPhone向けに準備するムービー形式はmp4形式のH.264コーデックで準備すればOKです。本来はブラウザごとのユーザーエージェントをjavascriptなりで判断して、ブラウザに適した再生方法をとるほうがいい気もします。はじめに書いたとおり、コーデック環境が統一されていない状況でかえって手間がかかります。WebMの件もAppleさんが難色をしめしていたり、IE9でのコーデックサポートがH.264と安心できない状態がしばらく続きそうです。|あわせて読みたいコレはすごい。(09/23)【Twitter】Twitterのインターフェイスデザインが変わった模様。COMMENTS【計画】九州電力で計画停電が確定。(05/23)Javascriptを覚えたい!でも参考書も難しい...。(12/26)iPadで3Dモデリング制作が実現。</gecko>:げことじ。