+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< November 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< 地域別Webギャラリーサイト | main | グルーポン系サイトの一括検索サイト&比較サイトまとめ >>
HTML5 VideoタグとFLVの埋め込み覚書


最近知人のサイトを手伝っていて悩んだので個人的な覚書をかねてのエントリーです。

テーマはiPad、iPhoneとPCブラウザ、両方での動画閲覧です。




白石 俊平
日経BP社
¥ 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を使用しています。

■javascriptの記述
<script type<="text/javascript" src="js/swfobject.js" ></script>
<head>内でスクリプト読み込みます。

<script type="text/javascript">
 var flashvars = {'flv':'flv.swf'};
var params = {menu:'false',wmode:'opaque'};
var attributes = {}; swfobject.embedSWF("flv.swf", "flash", "320", "240", "8.0.0","img/expressInstall.swf",flashvars,params,attributes); </script>
■HTMLの記述
<div id="flash">
<video src="video.mp4" controls="controls" height="240" width="320"></video>
</div>

SWFObjectの基本的な使用方法はこちらを参照ください。
http://code.google.com/p/swfobject/wiki/documentation

あわせてFLV再生用のスキンに「FLV Player」を使用しています。
こちらも参考に。

■FLV Player
http://flv-player.net/

今回はこのフリーのFLVスキンを使用しているためこんなソースになっています。
使用するスキンやFlashの設定により埋め込みソースは異なりますので気をつけてください。

ソースを見るとすぐにわかりますが、SWFObject.jsで指定したid(この場合は”flash”)にjavascriptによってFlashが埋め込まれます。
通常は指定した<div 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と安心できない状態がしばらく続きそうです。


| HTML | 02:47 | comments(2) | trackbacks(0) | - | - |はてなブックマーク - HTML5 VideoタグとFLVの埋め込み覚書 | このエントリーをはてなブックマークに追加
共有をありがとう!非常に有用な指示!
| download youtube video | 2011/08/18 7:17 PM |
興味深いプログラム!共有し、私たちのためにそれを記述するためのありがとう!
| wav to mp3 | 2011/08/24 7:03 PM |









http://blog.tug.lomo.jp/trackback/990222