による：
http://developer.android.com/sdk/android-2.0-highlights.html
Android 2.0はHTML5ビデオ要素をサポートする必要があります。Motorola Droidを使用してこれを機能させることはできず、HTML5ビデオのサンプルページでビデオを正常に表示することもできませんでした。現在、QuickTimeやFlashはサポートされていないので、mp4ビデオをWebページに埋め込むために考えられる唯一の方法はこれです。誰かがこれで運がありましたか？
回答:
私はこれを使っていくつかの実験を行ったところであり、私が言えることから、次の3つが必要です。
このページのデモをご覧ください：http : //broken-links.com/tests/video/
これは、すべてのビデオ対応デスクトップブラウザ、iPhoneおよびAndroidで動作します。
マークアップは次のとおりです。
<video id="video" autobuffer height="240" width="360">
<source src="BigBuck.m4v">
<source src="BigBuck.webm" type="video/webm">
<source src="BigBuck.theora.ogv" type="video/ogg">
</video>
そして私はJSにこれを持っています：
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
Samsung Galaxy Sでテストしたところ、問題なく動作しました。
ロマンの答えは私にとってうまくいきました-または、少なくとも、それは私が期待していたことを私に与えました。電話のネイティブアプリケーションでビデオを開く方法は、iPhoneの場合とまったく同じです。
視点を調整して、独自のアプリケーションでビデオをフルスクリーンで再生し、そのためにコーディングすることを期待することはおそらく価値があります。iPhoneと同じようにビデオをクリックして再生するのに十分ではないことはイライラしますが、それはそれを起動するためにonclick属性のみを取るので、それは世界の終わりではありません。
私のアドバイス、FWIWは、ポスター画像を使用し、動画を再生することを明確にすることです。私は現在、まさにそれを行うプロジェクトに取り組んでおり、クライアントはそれに満足しています-そしてもちろん、彼らは無料でウェブ版のAndroidバージョンを手に入れています。 iPhone Webアプリ。
実例として、有効なAndroidビデオタグを以下に示します。素敵でシンプル。
<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>controlsファイアフォックスでは、属性を使用すると、一時停止を押すとonclickイベントがバイパスされます（ビデオが実際に一時停止されるため）が、どういうわけかクリックしても再生は行われません-ビデオを再開するには、ビデオ（実際の再生ボタンではなく）をクリックする必要があります。
ここに、私の友人がNexus OneでHTMLでビデオを表示する問題をどのように解決したかを示します。
ビデオをインラインで再生することはできませんでした。実際、インターネット上の多くの人が、ハニカム以降のHTMLでのインラインビデオ再生がサポートされていることを明示的に述べています。また、FroyoやGingerbreadと戦っていました...また、小さな電話の場合、フルスクリーンで再生するのは非常に自然だと思います。 。したがって、目標はビデオを全画面で開くことでした。ただし、このスレッドで提案されたソリューションは機能しませんでした。要素をクリックしても何もトリガーされませんでした。さらに、ビデオコントロールは表示されましたが、ポスターは表示されなかったため、ユーザーエクスペリエンスはさらに奇妙でした。それで彼がしたことは次のことでした：
JavaScriptを介して呼び出すことができるように、ネイティブコードをHTMLに公開します。
JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");
コード自体には、ビデオを再生するためのネイティブアクティビティを呼び出す関数が含まれていました。
public class JavaScriptInterface {
private Activity activity;
public JavaScriptInterface(Activity activiy) {
this.activity = activiy;
}
public void startVideo(String videoAddress){
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setDataAndType(Uri.parse(videoAddress), "video/3gpp"); // The Mime type can actually be determined from the file
activity.startActivity(intent);
}
}
次に、HTML自体で失敗を続け、videoタグを機能させてビデオを再生します。したがって、最終的に彼onclickはビデオのイベントを上書きして、実際の再生を行うことにしました。これはほとんどうまくいった-ポスターが表示されなかったことを除いて。これが最も奇妙な部分です-彼はタグの属性ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"を設定するたびに受信し続けましたposter。最後に彼は問題を発見しましたが、それは非常に奇妙でした-彼はタグにsourceサブタグを保持していましたvideoが、それを使用していなかったことが判明しました。そして、奇妙なことに、これが問題の原因でした。次に、videoセクションの彼の定義を見てください。
<video width="320" height="240" controls="controls" poster='poster.gif' onclick="playVideo('file:///sdcard/test.3gp');" >
Your browser does not support the video tag.
</video>
もちろん、ページの先頭にJavaScript関数の定義も追加する必要があります。
<script>
function playVideo(video){
window.JSInterface.startVideo(video);
}
</script>
これは純粋なHTMLソリューションではないことに気づきましたが、Nexus Oneタイプの電話で実現できた最高のソリューションです。このソリューションのすべてのクレジットは、Dimitar Zlatkov Dimitrovに送られます。
手動で呼び出すと機能video.play()するはずです。
<!DOCTYPE html>
<html>
<head>
<script>
function init() {
enableVideoClicks();
}
function enableVideoClicks() {
var videos = document.getElementsByTagName('video') || [];
for (var i = 0; i < videos.length; i++) {
// TODO: use attachEvent in IE
videos[i].addEventListener('click', function(videoNode) {
return function() {
videoNode.play();
};
}(videos[i]));
}
}
</script>
</head>
<body onload="init()">
<video src="sample.mp4" width="400" height="300" controls></video>
...
</body>
</html>
私のandroid 2.2ブラウザーをhtml5test.comに向けると、ビデオ要素はサポートされているが、リストされているビデオコーデックはどれも...ビデオ要素をサポートしても意味がないように見えますが、コーデックはありません??? そのテストページに問題がない限り。
しかし、私はaudio要素で同じ種類の状況を見つけました：要素はサポートされていますが、オーディオ形式はサポートされていません。こちらをご覧ください：
http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/
ビデオを適切にエンコードするまで、何もうまくいきませんでした。正しいハンドブレーキの設定については、このガイドを試してください：http : //forum.handbrake.fr/viewtopic.php?f=7&t=9694
たぶんあなたはデバイスのために具体的にビデオをエンコードする必要があります：
<video id="movie" width="320" height="240" autobuffer controls>
<source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.mp4" type='video/mp4; codecs="some droid video codec, some droid audio codec"'>
</video>ここで機能したエンコード構成の例がいくつかあります。
動作するはずですが、解像度を確認してください： Android 2.0とwebkit
キャンバスはそのまま使用できますが、ジオロケーションはエミュレータではまったく機能しないようです。もちろん、私はそれを動作させるためにモックの場所を送信する必要があるので、これが実際の電話でどのようになるかはわかりません。videoタグでも同じことが言えます。実際にビデオを再生しないという問題がありますが、ビデオがエミュレータが処理できる解像度よりも高い解像度であることが原因だと思います。Motorola Droidやその他の次世代Androidデバイスでこれを試してみると、さらに詳しい情報が得られます
これは正確にあなたの質問に答えないかもしれませんが、3GPまたは3GP2ファイル形式を使用しています。rtspプロトコルを使用する方が良いですが、Androidブラウザーも3GPファイル形式を認識します。
あなたは次のようなものを使うことができます
self.location = URL_OF_YOUR_3GP_FILE動画プレーヤーをトリガーします。ファイルがストリーミングされ、再生が終了すると、処理がブラウザーに返されます。
私にとってこれは、Androidデバイスでの現在のビデオタグ実装に関する多くの問題を解決します。
によると：https : //stackoverflow.com/a/24403519/365229
これはプレーンなJavascriptで動作するはずです：
var myVideo = document.getElementById('myVideoTag'); myVideo.play(); if (typeof(myVideo.webkitEnterFullscreen) != "undefined") { // This is for Android Stock. myVideo.webkitEnterFullscreen(); } else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") { // This is for Chrome. myVideo.webkitRequestFullscreen(); } else if (typeof(myVideo.mozRequestFullScreen) != "undefined") { myVideo.mozRequestFullScreen(); }フルスクリーン命令の前にplay（）をトリガーする必要があります。そうしないと、Androidブラウザーではフルスクリーンになりますが、再生は開始されません。Androidブラウザー、Chrome、Safariの最新バージョンでテスト済み。
私はそれをAndroid 2.3.3と4.4ブラウザーでテストしました。
多くの調査の結果、さまざまなデバイスで、これまでのところ、フォーマットMP4ほどサポートされていないという単純な結論に達しましたMOV。したがって、私はMOVすべてのブラウザーですべてのAndroidおよびAppleデバイスでサポートされているフォーマットを使用しています。デバイスがモバイルデバイスまたはデスクトップブラウザーの天気を検出し、SRCそれに応じて設定しました。
if (IsMobile()) {
$('#vid').attr('src', '/uploads/' + name + '.mov');
}
else {
$('#vid').attr('src', '/uploads/' + name + '.webm');
}
function IsMobile() {
var isMobile = false; //initiate as false
if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
|| /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) isMobile = true;
return isMobile;
}.mp4Androidデバイスでこの形式を使用してビデオを再生しようとしましたが、うまくいきませんでした。そのため、試行錯誤を繰り返した後、ビデオを.webm次のような形式に変換し、追加のJavaScriptまたはJQueryを使用しません。
<video id="video" class="video" muted loop autoplay>
<source src="../media/some_video.webm" type="video/webm">
Sorry, your browser doesn't support embedded videos.
</video>古いAndroidデバイス（2020年の時点で少なくとも数年前）で動作しました。
HTML5は、Galaxy SなどのGoogle（Android）電話とiPhoneの両方でサポートされています。ただし、iPhoneはFlashをサポートしていません。Googleの電話はサポートしています。