iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法

　iPhoneやAndroidでもHTML5のvideoタグを利用することで、YouTubeなどのアプリを立ち上げる事無くブラウザ内で動画を再生することができます。しかしこのビデオタグ…端末によって動作が本当にまちまちで扱いにかなり苦労します。以下、iPhone/Androidのブラウザ内で動画を再生させる時にハマりそうな部分をまとめました。

　ここで書いた内容は細かい部分なので、「videoタグって何？」ということを知りたい方は、 こちらのページが参考になるかと思います。

　iPhone/iPad/Android4.x/Android2.xでそれぞれ再生ボタンをタップしたときの挙動が異なります。そのままブラウザの中で再生が始まるのが、iPadとAndroid4.0です。それ以外はムービーを再生するための画面に遷移します。

　この再生方式の違いはJavascriptなどを用いても制御できないので、そういう違いがあるということをムービーページの制作前に理解しておく必要が有ります。

　動画にBasci認証がかかっているとAndroid端末だとファイルまでたどり着く事が出来ず、再生されません。Basic認証がかかっている・かかっていないという部分を全く気にせず開発していたため、多いにハマりました。

　.htaccessを使って動画ファイル(mp4など)を認証の対象外にします。

　以下のようにソースを指定している箇所でID/PASS書いてもいけるんじゃないかと確認してみたのですが、Android4はいけたのですが、Android2.xではダメでした。

[関連]Qiita [キータ] >Androidの動画プレイヤがBasic認証を越えられないから

　Basic認証絡みでもうひとつ。今度はiPhoneです。Poster属性を使うと再生が始まる前に表示される画像を設定する事ができます。iPhone/Androidともに対応はしているのですが、Basic認証がかかっている環境だとiPhoneではPoster画像が反映されません。

　※ちなみに、iPhoneだと上記のように再生アイコンが画像の上に乗るのですが、Androidだと再生アイコンは表示されません。

　調べた範囲では、一部のGalaxy端末で再生ボタンが動かない模様。Javascriptで、トリガーを作ってあげることで対応します。

　JavaScriptのライブラリ「 html5media」を入れる。

　以下のようなコードで自作で再生ボタンを作る。

　play()以外にもvideoタグで使えるメソッドの説明はこちらが参考になります。

※HTMLクイックリファレンス > HTML5のAPI、および、関連仕様 > video要素、audio要素をJavaScriptから操作

　Android4系では問題無く再生される動画ファイルであっても、Android2系でmp4が再生されない場合があります。

　Android2.x系だと動画ファイルのヘッダ情報が厳密に正しくないと再生されないので、mp4ファイルのヘッダを適切なものに書き換える必要があります。書き換えにはアプリケーションを利用すると楽です。ここでは「 HandBrake」というアプリでの編集方法をご紹介します。

　「HandBrake」を開いた後、変換対象の動画ファイルを選択します。その後、上記の画面のように、

①プリセット画面にて「Android Mid」か「AndroidHigh」のどちらかを選択

②Web optimizedにチェック

③Startで書き出し開始

　これで完了です。

※動画ファイルや、output先のディレクトリ名は半角英数字を使用される事をおすすめします。

（提供： casemobile〜スマホコンテンツ開発ブログ）