HTML5 <video> -Element unter Android

90

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?

jmans
quelle
2
Ich habe auch einen Droiden und konnte keine HTML5-Videos abspielen. Sogar die Seite "Video für alle" funktioniert nicht.
Haxney
"Video für alle" wurde für mich auf eine alberne Titelseite umgeleitet - ich konnte nicht einmal versuchen, nur die eine Demo auf dieser Seite anzusehen!
Jmans
Platzieren Sie Videos in einem internen / externen Dateisystem und greifen Sie darauf zu. Beispiel: - <video Controls = 'Controls'> <source src = "file: /storage/sdcard0/video_name.mp4" type = 'video / mp4'>; </ video>
Ravikiran

Antworten:

78

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.

stoppt grün
quelle
1
Die Demo scheint auf meinem Nexus One nicht zu funktionieren (nichts passiert, wenn ich auf "Play"
tippe
1
Übrigens funktioniert der von Ihnen angegebene Link nicht auf einem 2.3.3 Nexus One, Nachricht: Dieses Video kann nicht abgespielt werden
Panthro
@ RafaelRoman Ich habe aufgenommen und antworte, das wird hoffentlich in Nexus One funktionieren (zumindest für mich): stackoverflow.com/a/8952025/1108032
Boris Strandjev
Ich kann dies auf meinem 4.0.4-Tablet nicht zum Laufen bringen. Ich denke, einheimisch ist der
Harry
1
Funktioniert nicht unter Android 5.x, Video ist schwarz, bis auf Wiedergabe geklickt wird
FiringSquadWitness
9

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();"/>
Unregelmäßiger Schuppen
quelle
In Desktop-Browsern gibt es seltsame Probleme damit. Wenn Sie in Chrome und Firefox das controlsAttribut verwenden, wird das Onclick-Ereignis umgangen, wenn Sie auf Pause drücken (damit das Video tatsächlich angehalten wird), aber irgendwie passiert nichts, wenn Sie auf Wiedergabe klicken. Sie müssen in das Video klicken (nicht auf die Schaltfläche für die eigentliche Wiedergabe), damit das Video fortgesetzt wird.
Kip
Das funktioniert. Ich kann h264-Videos auf Android abspielen. Die Dateien haben das Suffix mp4.
Neoneye
8

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.

Boris Strandjev
quelle
Ich musste die Javascript-Funktion playVideo (videoName) mit Bezug auf JSInterface hinzufügen, um dies zum Laufen zu bringen - möglicherweise nicht offensichtlich für Leute, die diese Technik noch nicht verwendet haben. Außerdem habe ich es vorgezogen, den vollständigen Pfad mit getExternalDirectory () in der Funktion startVideo zu erstellen, wobei nur der Name der Datei aus Javascript übergeben wurde. Hat für mich funktioniert, außer dass das Posterbild verschwindet, wenn die Videoaktivität geschlossen wird und das WebView wieder fokussiert wird (mein WebView ist in einen ViewPager eingebettet). Vielen Dank.
Alan-P
Vielen Dank für die Kommentare. Ich habe das Javascript-Aufrufskript hinzugefügt und stimme auch vollständig mit dem Kommentar der
Videopfadkonstruktion
Ich hatte auch den Fehler "Null oder leerer Wert für Header-Host". Es war das unbenutzte Quell-Tag. Dieses Quell-Tag wird tatsächlich von der ios-App (Phonegap-App) verwendet. Jetzt füge ich das Quell-Tag nur auf ios ein und es funktioniert einwandfrei. Vielen Dank für Ihre Hilfe bei diesem seltsamen Problem.
Guillaume Gendre
5

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>
Roman Nurik
quelle
2
Dadurch komme ich zu einem Filmsymbol, auf das ich klicken kann, um MP4 in der Video-App anzuzeigen, das mir jedoch kein Inline-Video liefert.
Jmans
Inline-Video wird ab Android 3.1 unterstützt.
Roman Nurik
Kann jemand bestätigen, dass dies auf einem Honeycomb + Gerät funktioniert? Ich konnte es auf 3.2 nicht zum Laufen bringen. Ich kann den Ton hören und sehe kein Video.
Dongshengcn
4

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/

Anders Sundnes Løvlie
quelle
Gleiches gilt für mich mit html5test.com auf SGS 2.1update1. Haben Sie schon einen Weg gefunden, Videos einzubetten? Wenn ich die Testseite break-links.com/tests/video öffne und auf das Wiedergabesymbol klicke , wird das Video abgespielt , aber nicht eingebettet (wie auf Desktop / Firefox), sondern im Media Player geöffnet.
Mathias Conradt
Das gleiche gilt für mein LG Optimus Black ... aber die Demo für defekte Links funktioniert. Ich werde versuchen, mit der Handbremse zu codieren.
Pier
4

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

Tim Scollick
quelle
Das Problem wurde auch für mich behoben. Aber mpeg4 funktionierte nicht für andere Browser, also habe ich 2 Videoebenen erstellt. Erst mpeg4 und dann h264: <video width = "480" height = "386" Autoplay-Schleife stummgeschaltet> <source src = "assets / chat_letter_mpeg4.mp4" type = "video / mp4"> <! - MPEG4 für Android - -> <source src = "assets / chat_letter_h264.mp4" type = "video / mp4"> <! - h264 für alles andere -> <img alt = "" src = "assets / chat_letter.png"> <! - Bild als Fallback für IE8 -> </ video>
yodalr
1

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

ad rees
quelle
1

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.

Mike
quelle
1

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.

TheLD
quelle
0

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

jesup
quelle
Ich werde versuchen, mit der Auflösung herumzuspielen, aber ich verwende ein tatsächliches Gerät, und der Videostream (eine Webcam) ist ziemlich niedrig.
Jmans
0

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.

Leviathan
quelle
Hallo, ich habe es mit Android WebView versucht, aber es funktioniert nicht. Gibt es noch andere Einstellungen, die ich vornehmen muss? Ich verwende den Code in diesem Link .
Kris
Nein, ich kenne keinen anderen Weg, um dies zu erreichen.
Leviathan
0

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.

Behrouz.M
quelle
0

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;
}
Koby Douek
quelle
0

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

Kris Stern
quelle
-4

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.

KirstenPowell
quelle
Google-Handys haben Flash in Android 4.0 (ICS) gelöscht, und bei dieser Frage ging es sowieso nicht um das iPhone.
Greg.kindel