HTML5 <video> -Element unter Android

Gemäß:

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

Android 2.0 sollte das HTML5-Videoelement unterstützen. Ich konnte dies mit einem Motorola Droid nicht zum Laufen bringen und ein Video auf keiner der HTML5-Videobeispielseiten erfolgreich anzeigen. Da QuickTime oder Flash derzeit nicht unterstützt werden, ist dies das einzige andere, was ich mir vorstellen kann, um MP3-Videos in eine Webseite einzubetten. Hat jemand Glück damit gehabt?

Ich habe gerade ein paar Experimente damit gemacht, und soweit ich Ihnen sagen kann, brauchen Sie drei Dinge:

1. Sie müssen nicht die Verwendung Typ Attribut , wenn die Videotelefonie.
2. Sie müssen video.play () manuell aufrufen
3. Das Video muss mit einigen recht strengen Parametern codiert werden. Wenn Sie die iPhone-Einstellung für Handbremse bei aktivierter Schaltfläche "Weboptimiert" verwenden, reicht dies normalerweise aus.

Schauen Sie sich die Demo auf dieser Seite an: http://broken-links.com/tests/video/

Dies funktioniert, AFAIK, in allen videofähigen Desktop-Browsern, iPhone und Android.

Hier ist das Markup:

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

Und ich habe dies in der JS:

var video = document.getElementById('video');
video.addEventListener('click',function(){
  video.play();
},false);

Ich habe dies auf einem Samsung Galaxy S getestet und es funktioniert gut.

Romans Antwort funktionierte gut für mich - oder zumindest gab es mir das, was ich erwartet hatte. Das Öffnen des Videos in der nativen Anwendung des Telefons entspricht genau dem des iPhone.

Es lohnt sich wahrscheinlich, den Blickwinkel anzupassen und zu erwarten, dass das Video in einer eigenen Anwendung im Vollbildmodus abgespielt und dafür codiert wird. Es ist frustrierend, dass das Klicken auf das Video nicht ausreicht, um es auf die gleiche Weise wie das iPhone abzuspielen, aber da es nur ein Onclick-Attribut benötigt, um es zu starten, ist es nicht das Ende der Welt.

Mein Rat, FWIW, ist, ein Posterbild zu verwenden und deutlich zu machen, dass das Video abgespielt wird. Ich arbeite gerade an einem Projekt, das genau das tut, und die Kunden sind damit zufrieden - und natürlich bekommen sie die Android-Version einer Web-App kostenlos, weil der Vertrag nur für eine war iPhone Web App.

Zur Veranschaulichung finden Sie unten ein funktionierendes Android-Video-Tag. Schön und einfach.

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

Hier füge ich hinzu, wie ein Freund das Problem der Anzeige von Videos in HTML in Nexus One gelöst hat:

Ich konnte das Video nie inline abspielen lassen. Tatsächlich erwähnen viele Leute im Internet ausdrücklich, dass Inline-Videowiedergabe in HTML seit Honeycomb unterstützt wird, und wir haben mit Froyo und Gingerbread gekämpft ... Auch für kleinere Telefone denke ich, dass das Abspielen im Vollbildmodus sehr natürlich ist - ansonsten ist nicht so viel sichtbar . Ziel war es also, das Video im Vollbildmodus zu öffnen. Die in diesem Thread vorgeschlagenen Lösungen funktionierten jedoch nicht für uns - das Klicken auf das Element löste nichts aus. Darüber hinaus wurden die Videokontrollen angezeigt, es wurde jedoch kein Poster angezeigt, sodass die Benutzererfahrung noch seltsamer war. Also tat er Folgendes:

Stellen Sie nativen Code in den HTML-Code ein, um ihn über Javascript aufzurufen:

JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(jsInterface, "JSInterface");

Der Code selbst hatte eine Funktion, die native Aktivität zum Abspielen des Videos aufrief:

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);
    }
}

Dann scheiterte er im HTML selbst immer wieder daran, dass das Video-Tag das Video abspielte. Schließlich beschloss er, das onclickEreignis des Videos zu überschreiben , damit es das eigentliche Spiel abspielt. Dies funktionierte fast für ihn - außer dass kein Poster angezeigt wurde. Hier kommt der seltsamste Teil - er erhielt ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"jedes Mal, wenn er das posterAttribut des Tags festlegte. Schließlich fand er das Problem, das sehr seltsam war - es stellte sich heraus, dass er den sourceUntertag im videoTag behalten hatte , ihn aber nie benutzte. Und seltsamerweise verursachte genau dies das Problem. Siehe nun seine Definition des videoAbschnitts:

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

Natürlich müssen Sie auch die Definition der Javascript-Funktion im Kopf der Seite hinzufügen:

<script>
  function playVideo(video){
    window.JSInterface.startVideo(video);
  }
</script>

Mir ist klar, dass dies keine reine HTML-Lösung ist, sondern das Beste, was wir für den Nexus One-Telefontyp tun konnten. Alle Credits für diese Lösung gehen an Dimitar Zlatkov Dimitrov.

Wenn Sie manuell aufrufen video.play(), sollte es funktionieren:

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

Wenn ich meinen Android 2.2-Browser auf html5test.com zeige , wird mir mitgeteilt , dass das Videoelement unterstützt wird, aber keiner der aufgelisteten Video-Codecs ... scheint ein wenig sinnlos zu sein, das Video-Element zu unterstützen, aber keine Codecs ??? es sei denn, mit dieser Testseite stimmt etwas nicht.

Allerdings habe ich mit dem Audioelement die gleiche Situation festgestellt: Das Element wird unterstützt, aber keine Audioformate. siehe hier:

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

Bei mir hat nichts funktioniert, bis ich das Video richtig codiert habe. In diesem Handbuch finden Sie die richtigen Einstellungen für die Handbremse: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

Möglicherweise müssen Sie das Video speziell für das Gerät codieren, z.

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

Es gibt einige Beispiele für Codierungskonfigurationen, an denen hier gearbeitet wurde:

https://supportforums.motorola.com

Versuchen Sie es mit h.264 in einem mp4-Container. Ich hatte viel Erfolg damit auf meinem Droid X. Ich habe zencoder.com für Formatkonvertierungen verwendet.

Das funktioniert bei mir:

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

Nur wenn die .mp4 oben ist und die Videodatei nicht zu groß ist.

Es soll funktionieren, aber achten Sie auf die Auflösung: Android 2.0 und Webkit

Canvas funktioniert sofort, während Geolocation im Emulator anscheinend überhaupt nicht funktioniert. Natürlich muss ich ihm Scheinstandorte schicken, damit es funktioniert, also habe ich keine Ahnung, wie das auf einem tatsächlichen Telefon aussehen würde. Ich kann dasselbe mit dem Video-Tag sagen. Es gibt Probleme damit, dass das Video nicht abgespielt wird, ABER ich denke, es ist die Tatsache, dass das Video eine höhere Auflösung hat als das, was der Emulator verarbeiten kann. Wir werden mehr wissen, wenn jemand dies auf einem Motorola Droid oder einem anderen Android-Gerät der nächsten Generation versucht

Dies beantwortet Ihre Frage möglicherweise nicht genau, aber wir verwenden das 3GP- oder 3GP2-Dateiformat. Besser sogar das RTSP-Protokoll, aber der Android-Browser erkennt auch das 3GP-Dateiformat.

Sie können so etwas wie verwenden

self.location = URL_OF_YOUR_3GP_FILE

um den Videoplayer auszulösen. Die Datei wird gestreamt und nach Beendigung der Wiedergabe wird die Verarbeitung an den Browser zurückgegeben.

Für mich löst dies viele Probleme mit der aktuellen Implementierung von Video-Tags auf Android-Geräten.

Laut: https://stackoverflow.com/a/24403519/365229

Dies sollte mit einfachem Javascript funktionieren:

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();
}

Sie müssen play () vor der Vollbildanweisung auslösen, andernfalls wird im Android-Browser nur der Vollbildmodus angezeigt, die Wiedergabe wird jedoch nicht gestartet. Getestet mit der neuesten Version von Android Browser, Chrome, Safari.

Ich habe es auf Android 2.3.3 & 4.4 Browser getestet.

Nach vielen Recherchen auf vielen verschiedenen Geräten bin ich bisher zu dem einfachen Schluss gekommen, dass dies MP4viel weniger unterstützt wird als das MOVFormat. Daher verwende ich MOVin allen Browsern das Format, das von allen Android- und Apple-Geräten unterstützt wird. Ich habe festgestellt, ob es sich bei dem Gerät um ein mobiles Gerät oder einen Desktop-Browser handelt, und die folgenden Einstellungen vorgenommen 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;
}

Ich habe versucht, mit dem .mp4Format ein Video auf Android-Geräten abzuspielen, aber das ging nicht gut. Nach einigem Ausprobieren habe ich das Video .webmohne zusätzliches Javascript oder JQuery in das Format und den folgenden Code konvertiert :

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

Es funktionierte auf einem älteren Android-Gerät (mindestens einige Jahre alt ab 2020).

HTML5 wird sowohl von Google (Android) -Handys wie Galaxy S als auch vom iPhone unterstützt. Das iPhone unterstützt jedoch kein Flash, das von Google-Handys unterstützt wird.