【HTML5】Android で video タグ設置するもタップに反応が無いとか色々。

ここ数日3時間ぐらいしか寝れてないので眠いです(´-ω-)


それはさておき今日はHTML5のお話を少し。
仕事でAndroid/iPhone向けに動画を配信しよーということで
最初は動画ファイルに直リン張ってたけどスマホ向けなのに
スマートじゃないって事で、HTML5のvideoタグを使用。


今まで直リンだった動画をソースに指定して。。。
iPhone4では難なく再生(=∀=)/


Androidが問題児でした。。。
表示されてるビデオの枠をタップしても反応しない。
あっるぇぇぇぇぇぇ?


というわけでググったら、Androidは onclick="this.play()" とか
つけないとダメという事が分かったので早速つけてみた。。。
やった!タップに反応した!


と思ったら 「この動画は再生できません」
何というツンデレ


んで、他のAndroidで再生できる動画の中身を確認すると
どうやら moov atom やらその辺がちゃんとしてないと
認識してくれない模様だったので、MP4BOX引っ張り出して
動画に以下のおまじないをかけてやったら無事に再生できましたっと。


MP4BOX -add 元動画のパス -brand mp42:1 -new 出力動画のパス


元動画と出力動画は同じで構いませんよー


で、最終的に出来上がった video タグはこちら




動画自体は h264 aac な mp4 でも mpeg4 aac な 3gp でも概ね大丈夫っぽい。