ブラウザでHTML5動画を再生する - ほとんどのAndroid搭載端末ではどのように動作しますか？

Question

携帯端末で再生するHTML5動画を取得しようとしています。最新バージョンのiOSでうまく動作しているようですが、Android搭載端末との矛盾が増えています。

私はvideo.jsを使用してサムネイル画像のクリックをリッスンしています。このサムネイル画像はHTML5ビデオで置き換えられ、自動的に再生されます。次のコードは、Androidエミュレータでは機能しません（サムネイルをクリックすると何も起こりません）。自分のDroid Razrで試してみると、ビデオが読み込まれてブラウザがフリーズします。これはネイティブブラウザのと Chromeで発生します。これはChromeがデバイス固有のものだと教えてくれます。

$(".video").live("click", function(e) { 
    e.preventDefault(); 
    $(this).replaceWith("<video id='" + $(this).data("video-id") + "' class='video-js' preoload='auto' width='100%' height='100%' poster='" + $(this).data("video-poster-url") + "'><source type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"' src='" + $(this).data("video-url") + "'></video>"); 

    video = _V_($(this)); 
    video.ready(function() { 
     this.play(); 
     this.requestFullScreen(); 
    }); 
}); 

HTMLはビーイングを終了します。これは完全にフリーズするAndroidデバイスを引き起こす、と私はビデオはほとんどのAndroidデバイス上で一貫して実行させるために行うことができる理由

<video id='fv3530' class='video-js' preoload='auto' width='100%' height='100%' poster='/posters/fv3530.jpg'> 
    <source type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" src='/videos/fv3530.mp4'> 
</video> 

誰もが知っていますか？

ありがとうございます！

Answer 1

source宣言からtype属性を削除します。これは、通常Android、古いバージョンで特に問題を引き起こします。

あなたのソースの宣言は、単純に次のようになります。

<source src='/videos/fv3530.mp4'> 

私は、Android（だけアンドロイド2.2を実行している私のHTCの欲望にそれをテスト）に取り組んでHTML5のビデオを持っているsmall siteを持っています。

Answer 2

SEこの質問してください：どうやらHTML5 <video> element on Android

、アンドロイドとHTML5ビデオを使用する可能性がhttp://developer.android.com/about/versions/android-2.0-highlights.html によると、そこにある。しかし、この作品を作るために、いくつかの厳しいparameteresがあるが（質問に対する確認応答を参照してください）。

あなたのケースでは、エミュレータ、特にhtml5などでイベントを処理するのは容易ではありませんので、テストのために本当にデバイスを使用してください（本当におすすめです）。あなたの携帯電話に関係しているのは、それがうまくいかない理由は、サポートされていないビデオコーデックを使用しているということです。