genEx::基本的にASP.net

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

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

それはさておき今日はHTML5のお話を少し。

仕事でAndroid/iPhone向けに動画を配信しよーということで

最初は動画ファイルに直リン張ってたけどスマホ向けなのに

スマートじゃないって事で、HTML5のvideoタグを使用。

今まで直リンだった動画をソースに指定して。。。

iPhone4では難なく再生(=∀=)/

Androidが問題児でした。。。

表示されてるビデオの枠をタップしても反応しない。

あっるぇぇぇぇぇぇ？

というわけでググったら、Androidは onclick="this.play()" とか

つけないとダメという事が分かったので早速つけてみた。。。

やった！タップに反応した！

と思ったら　「この動画は再生できません」

何というツンデレ

んで、他のAndroidで再生できる動画の中身を確認すると

どうやら moov atom やらその辺がちゃんとしてないと

認識してくれない模様だったので、MP4BOX引っ張り出して

動画に以下のおまじないをかけてやったら無事に再生できましたっと。

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

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

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

<video src="動画のパス" poster="最初に表示されるサムネのパス" autoplay controls onclick="this.play()">

</video>

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

Permalink | コメント(0) | トラックバック(0) | 13:37