web-dev-qa-db-ja.com

Android上のHTML5 <video>要素

による：

http://developer.Android.com/sdk/Android-2.0-highlights.html

Android 2.0はHTML5 video要素をサポートする必要があります。 Motorola Droidを使用してこれを機能させることはできません。また、HTML5ビデオのサンプルページでビデオを正常に表示することもできません。現在、QuickTimeまたはFlashのサポートがないため、これは、Webページにmp4ビデオを埋め込むために考えることができる他の唯一のものです。誰もこれで運がありましたか？

androidvideomobilehtml5
89
jmans

私はこれでいくつかの実験を行ったところです、そして私があなたに伝えることができるものから、3つのものが必要です：

  1. ビデオを呼び出すときに、type属性を使用しないでください。
  2. 手動でvideo.play（）を呼び出す必要があります
  3. ビデオは、いくつかの非常に厳しいパラメーターにエンコードする必要があります。 「Web最適化」ボタンをオンにしてHandbrakeのiPhone設定を使用すると、通常はうまくいきます。

このページのデモをご覧ください： 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でテストしましたが、正常に動作します。

78
stopsatgreen

ローマンの答えは私にとってはうまくいきました-または、少なくとも、それは私が期待していたものを与えてくれました。電話のネイティブアプリケーションでビデオを開くことは、iPhoneの場合とまったく同じです。

おそらくあなたの視点を調整し、ビデオが独自のアプリケーションでフルスクリーンで再生されることを期待し、そのためにコーディングする価値があります。ビデオをクリックするだけでは、iPhoneと同じように再生するには不十分ですが、onclick属性を使用して起動するだけで、世界の終わりではありません。

私のアドバイスであるFWIWは、ポスター画像を使用し、それがビデオを再生することを明らかにすることです。私は現時点で正確にそれを行うプロジェクトに取り組んでおり、クライアントはそれに満足しています-そしてもちろん、彼らはAndroidバージョンのウェブアプリを無料で手に入れています契約はiPhone Webアプリのみでした。

説明のために、動作するAndroidビデオタグを以下に示します。素敵でシンプル。

<video src="video/placeholder.m4v" poster="video/placeholder.jpg" onclick="this.play();"/>
9
Irregular Shed

ここに、Nexus Oneで友人がHTMLで動画を表示する問題をどのように解決したかを示します。

ビデオをインラインで再生することはできませんでした。実際、インターネット上の多くの人々は、Honeycomb以来HTMLでのインラインビデオ再生がサポートされていることを明示的に述べています。 。そのため、目標はビデオを全画面で開くことでした。ただし、このスレッドで提案されたソリューションは機能しませんでした-要素をクリックしても何もトリガーされませんでした。さらに、ビデオコントロールは表示されましたが、ポスターは表示されなかったため、ユーザーエクスペリエンスはさらに奇妙になりました。彼がしたことは次のとおりです。

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自体で、彼は失敗し続け、ビデオを再生するビデオタグを機能させました。したがって、最終的に彼はビデオのonclickイベントを上書きし、実際の再生を行うことにしました。これは彼のためにほとんど働いた-ポスターが表示されなかったことを除いて。ここで最も奇妙な部分が来ます-彼はタグのposter属性を設定するたびにERROR/AndroidRuntime(7391): Java.lang.RuntimeException: Null or empty value for header "Host"を受け取り続けました。最後に、彼はこの問題を発見しました。これは非常に奇妙です-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に帰属します。

8
Boris Strandjev

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>
5
Roman Nurik

Android 2.2ブラウザを html5test.com に向けると、ビデオ要素はサポートされているが、リストされているビデオコーデックはどれも...ビデオをサポートするのに少し意味がないように見えます要素はあるがコーデックはない???そのテストページに何か問題がない限り。

ただし、audio要素でも同じような状況が見つかりました。要素はサポートされていますが、オーディオ形式はサポートされていません。こちらをご覧ください：

http://textopiablog.wordpress.com/2010/06/25/browser-support-for-html5-audio/

4
Anders Sundnes Løvlie

ビデオを適切にエンコードするまで、何もうまくいきませんでした。正しいハンドブレーキ設定については、このガイドを試してください： http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

4
Tim Scollick

たぶん、あなたは例えばデバイスのためにビデオをエンコードする必要があります：

<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>

ここで機能したエンコード構成の例がいくつかあります。

https://supportforums.Motorola.com

1
ad rees

これは私のために働く：

<video id="video-example" width="256" height="177" poster="image.jpg">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.ogg" type="video/ogg"></source>
This browser does not support HTML5
</video>

.mp4が上にあり、ビデオファイルが大きくない場合のみ。

1
Lars Van de Donk

Mp4コンテナでh.264を試してください。 Droid Xで大成功しました。フォーマット変換にzencoder.comを使用しています。

1
Mike

によると 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ブラウザーでテストしました。

0
Behrouz.M

動作するはずですが、解像度に注意してください： Android 2.0 and webkit

Canvasはすぐに使用できますが、Geolocationはエミュレーターではまったく機能しないようです。もちろん、私はそれを動作させるためにモックの場所を送らなければならないので、実際の電話でこれがどのようになるのか分かりません。ビデオタグでも同じことが言えます。実際にビデオを再生できないという問題がありますが、エミュレータが処理できる解像度よりもビデオの解像度が高いという事実だと思います。 Motorola Droidまたはその他の次世代Androidデバイスで誰かがこれを試してみると、より多くのことがわかります。

0
jesup

これはあなたの質問に正確に答えないかもしれませんが、3GPまたは3GP2ファイル形式を使用しています。 rtspプロトコルを使用する方が良いですが、Androidブラウザーも3GPファイル形式を認識します。

次のようなものを使用できます

self.location = URL_OF_YOUR_3GP_FILE

ビデオプレーヤーをトリガーします。ファイルはストリーミングされ、再生が終了すると、処理がブラウザに返されます。

私にとって、これはAndroidデバイスでの現在のビデオタグの実装に関する多くの問題を解決します。

0
leviathan

多くの異なるデバイスでの多くの調査の結果、これまでMP4はMOV形式よりもサポートされていないという単純な結論に達しました。そのため、すべてのブラウザーで、すべてのAndroidおよびAppleデバイスでサポートされているMOV形式を使用しています。デバイスがモバイルデバイスまたはデスクトップブラウザーである天気を検出し、それに応じて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;
}
0
Koby Douek