Androidでvideoタグによる動画再生を実装する際の落とし穴
HTML5ではvideoタグにより、動画を簡単に埋込める。スマートフォンサイトで動画を埋込む方法は検索すれば、役に立つ情報を掲載しているサイトがいくつも出てくるので、詳しいことはそれらを参照してもらうとして、結論から言うと以下のタグでiPhoneおよびAndroidに対応できるようだ。
参考ページ
http://sogitani.baigie.me/2011/07/smart-phone-movie/
http://today-only.net/html5-video/
（この２ページがとくに分かりやすくまとまっている）
<video src=”xxxxx.mp4″ preload=”none” poster=”xxxxx.jpg” onclick=”this.play();” controls >
<source src=”xxxxx.mp4″$gt;
</video>
iOSだと比較的すんなりと実装できるのだが、Androidでは一筋縄ではいかない数々の罠がしかけてあって、全てをクリアしなければならない。
私は落とし穴にハマりまくったので、確認すべきポイントを列挙しておく。
- ◆動画形式、コーデック
iOSでも再生させることを考慮すると、必然的に動画形式はmp4になだろう。コーデックはh.264。
動画変換はMacならこれが良いと思う（というか私はこれで変換したもので実装できた）http://jp.any-video-converter.com/any-video-converter-free-for-mac.php
- ◆videoタグにonclick="this.play();"を入れる
入れないとAndroidの端末によっては再生してくれない模様。
これはハマる。Basic認証が原因かもしれないという発想がそもそも湧かないわけで。
- ◆sourseタグにはtype属性は入れてはいけない
この落とし穴にハマって抜け出るのにどれだけかかったか。type属性があるとタップしても無反応になってしまうとか、全く意味不明。
追記
Basic認証をかけている状態だと、iOSではposter属性で指定した画像が表示されないようだ。
どうやら動画再生にBasic認証は鬼門のようだ。
