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

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

casemobile公式

2014/03/20(最終更新日:2014/03/20)


このエントリーをはてなブックマークに追加

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

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

再生方式の違い

 iPhone/iPad/Android4.x/Android2.xでそれぞれ再生ボタンをタップしたときの挙動が異なります。そのままブラウザの中で再生が始まるのが、iPadとAndroid4.0です。それ以外はムービーを再生するための画面に遷移します。
iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法 2番目の画像
 この再生方式の違いはJavascriptなどを用いても制御できないので、そういう違いがあるということをムービーページの制作前に理解しておく必要が有ります。

Basic認証をかけていると、Android端末で動画が再生されない

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

対処法

 .htaccessを使って動画ファイル(mp4など)を認証の対象外にします。
iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法 3番目の画像
 以下のようにソースを指定している箇所でID/PASS書いてもいけるんじゃないかと確認してみたのですが、Android4はいけたのですが、Android2.xではダメでした。
iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法 4番目の画像

Basic認証をかけているとiPhoneでPoster属性が反映されない

 Basic認証絡みでもうひとつ。今度はiPhoneです。Poster属性を使うと再生が始まる前に表示される画像を設定する事ができます。iPhone/Androidともに対応はしているのですが、Basic認証がかかっている環境だとiPhoneではPoster画像が反映されません。
iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法 5番目の画像
 ※ちなみに、iPhoneだと上記のように再生アイコンが画像の上に乗るのですが、Androidだと再生アイコンは表示されません。

Android2系で再生ボタンを押しても何も起きない

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

対処法1

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

対処法(別案)

 以下のようなコードで自作で再生ボタンを作る。
iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法 6番目の画像
iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法 7番目の画像
 play()以外にもvideoタグで使えるメソッドの説明はこちらが参考になります。

Android2系で再生ボタンを押すと「再生できません」ってアラートが出る

 Android4系では問題無く再生される動画ファイルであっても、Android2系でmp4が再生されない場合があります。
iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法 8番目の画像

対処法

 Android2.x系だと動画ファイルのヘッダ情報が厳密に正しくないと再生されないので、mp4ファイルのヘッダを適切なものに書き換える必要があります。書き換えにはアプリケーションを利用すると楽です。ここでは「 HandBrake」というアプリでの編集方法をご紹介します。
iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法 9番目の画像
 「HandBrake」を開いた後、変換対象の動画ファイルを選択します。その後、上記の画面のように、

①プリセット画面にて「Android Mid」か「AndroidHigh」のどちらかを選択
②Web optimizedにチェック
③Startで書き出し開始

 これで完了です。

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

hatenaはてブ


この記事の関連キーワード