HTML5のVideo Tagを使う際の注意点とiPad, iPhone向けの動画へ変換する

HTML5のVideo Tagを使うとIE9, iPhone, MacのFirefoxなど特定の環境だけ動画が再生されなくて困ったときのMemo.

結論から言うと、PC BrowserではFlowPlayerなどのFlashを使った方が無難。少なくともお客様相手の仕事はそうした方がいい。

VideoJSなどのJavaScript Library(HTML5のVideo Tag)を使う場合の注意点。

• FirefoxはH.264 codecの動画を再生できない。
  参考： Firefox で Youtube の HTML5 動画が見られない | トラブルシューティング | Firefox ヘルプ
• Google ChromeでもH.264の動画を再生できなくなる
  参考： Google ChromeがH.264対応をとりやめ、WebM推進を鮮明に -- Engadget Japanese
• MP4などの動画を再生するためにはApacheのMime Typeを設定する必要がある(IE)。
  参考： MIMEタイプ一覧 : 個人ホームページ / BIGLOBE

動画の形式(type)も様々。Video TagのType属性指定する値は下記Siteを参考に。

• Video type parameters - WHATWG Wiki
• H.264／AVC概要/4.プロファイルとレベル - MPlayer and MEncoder on MacOSX

iPad, iPhoneなどiOS向けへの動画はAdobe Media Encoderを使って変換しているけど、FFmpegなどで変換する場合は下記Siteを参考に。

• Technical Note TN2218: Compressing QuickTime Movies for the Web | Safari Developer Library
• 「ios dev h.264」でGoogle先生に聞く

 

< Related Posts >

• HTML5(<video>) or Flashを自動で切り替えてくれるJavaScript Library（iPadやiPhoneでも動画を再生）
• PHP or JavaScriptでMobile端末(iPad, iPhone, Android)かどうかを判別
• H.264コーデックのロイヤリティ（ライセンス）
• 【FFMpeg】H.264コーデックで高画質ストリーミング配信
• GoogleがOn2を買収してVP8ビデオコーデックが主流になるか
• H.264とOn2 VP6の動画Codec比較（違い）