Hatena::ブログ(Diary)

玄鵬の地下室

2012-10-23

Androidでvideoタグによる動画再生を実装する際の落とし穴

HTML5ではvideoタグにより、動画を簡単に埋込める。スマートフォンサイトで動画を埋込む方法は検索すれば、役に立つ情報を掲載しているサイトがいくつも出てくるので、詳しいことはそれらを参照してもらうとして、結論から言うと以下のタグでiPhoneおよびAndroidに対応できるようだ。

参考ページ

http://sogitani.baigie.me/2011/07/smart-phone-movie/

http://today-only.net/html5-video/

(この2ページがとくに分かりやすくまとまっている)

<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認証しているサイトでは再生不能

これはハマる。Basic認証が原因かもしれないという発想がそもそも湧かないわけで。

  • ◆sourseタグにはtype属性は入れてはいけない

この落とし穴にハマって抜け出るのにどれだけかかったか。type属性があるとタップしても無反応になってしまうとか、全く意味不明。

追記

Basic認証をかけている状態だと、iOSではposter属性で指定した画像が表示されないようだ。

どうやら動画再生にBasic認証鬼門のようだ。

MontMont 2013/02/06 10:38 はじめまして

sourseタグにtype属性を指定した場合、再生できなかった端末どの端末かわかりますか?
type属性を外すことで再生できない端末もあったので気になりました

genhougenhou 2013/02/08 15:54 Mont さん
私が確認した端末はIS06(Android2.2.1)です。OSやブラウザだけでなく、機種に依存する問題はほんとに困りますね・・・

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/genhou/20121023/1350941016
リンク元