it-swarm.com.de

HTML5 <video> -Element auf 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 konnte kein Video auf einer der HTML5-Beispielvideoseiten erfolgreich anzeigen. Da QuickTime oder Flash derzeit nicht unterstützt werden, ist dies das einzige andere, was mir zum Einbetten von MP3-Videos in eine Webseite in den Sinn kommt. Hat jemand Glück damit gehabt?

89
jmans

Ich habe gerade experimentiert und von dem, was ich Ihnen sagen kann, brauchen Sie drei Dinge:

  1. Sie dürfen beim Aufrufen des Videos nicht das Attribut vom Typ verwenden.
  2. Sie müssen video.play () manuell aufrufen
  3. Das Video muss mit recht strengen Parametern codiert werden. Normalerweise reicht es aus, die iPhone-Einstellung auf Handbrake zu verwenden, wenn die Option "Web Optimized" aktiviert ist.

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.

78
stopsatgreen

Die Antwort von Roman hat gut funktioniert - oder zumindest hat sie mir das gegeben, was ich erwartet hatte. Das Öffnen des Videos in der nativen Anwendung des Telefons erfolgt genauso wie beim iPhone.

Es lohnt sich wahrscheinlich, Ihren Blickwinkel anzupassen und zu erwarten, dass das Video in seiner eigenen Anwendung im Vollbildmodus wiedergegeben 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. Da es jedoch nur ein Klick-Attribut zum Starten erfordert, ist es nicht das Ende der Welt.

Mein Rat, FWIW, ist, ein Poster zu verwenden und zu verdeutlichen, dass das Video abgespielt wird. Ich arbeite gerade an einem Projekt, das genau das tut, und die Kunden sind damit zufrieden - und sie erhalten auch die kostenlose Android Version einer Web - App von Natürlich, denn der Vertrag galt nur für eine iPhone-Web-App.

Nur zur Veranschaulichung, ein funktionierendes Android Video-Tag ist unten. Schön und einfach.

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

Hier ist, wie ein Freund das Problem der Anzeige von Videos in HTML in Nexus One gelöst hat:

Ich konnte das Video nie inline abspielen. Tatsächlich erwähnen viele Leute im Internet ausdrücklich, dass das Inline-Abspielen von Videos in HTML seit Honeycomb unterstützt wird, und wir haben uns mit Froyo und Gingerbread gestritten ... Auch für kleinere Handys halte ich das Abspielen von Vollbild sehr natürlich - 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 - ein Klick auf das Element löste nichts aus. Außerdem wurden die Videosteuerelemente gezeigt, aber es wurde kein Poster angezeigt, sodass die Benutzererfahrung noch seltsamer war. Also tat er Folgendes:

Stellen Sie systemeigenen Code für den HTML-Code bereit, damit er über Javascript aufgerufen werden kann:

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 hat er im HTML-Code selbst immer wieder versagt, damit der Video-Tag funktioniert und das Video abgespielt wird. So beschloss er schließlich, das Ereignis onclick des Videos zu überschreiben, damit es tatsächlich abgespielt wird. Das hat bei ihm fast geklappt - außer dass kein Plakat gezeigt wurde. Hier kommt der seltsamste Teil - er erhielt immer wieder ERROR/AndroidRuntime(7391): Java.lang.RuntimeException: Null or empty value for header "Host", wenn er das poster -Attribut des Tags festlegte. Schließlich fand er das Problem, das sehr seltsam war - es stellte sich heraus, dass er das source -Untertag im video -Tag behalten hatte, es aber nie verwendete. Und seltsam genug, genau das verursachte das Problem. Sehen Sie sich nun seine Definition des Abschnitts video an:

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

8
Boris Strandjev

Wenn Sie video.play() manuell aufrufen, sollte dies 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>
5
Roman Nurik

wenn ich meinen Android 2.2 browser auf html5test.com zeige, wird das Videoelement unterstützt, aber keiner der aufgelisteten Video-Codecs ... scheint ein wenig sinnlos zu sein unterstützt das video element aber keine codecs ??? es sei denn mit dieser test seite stimmt was nicht.

ich habe jedoch die gleiche Situation mit dem Audio-Element festgestellt: Das Element wird unterstützt, aber keine Audio-Formate. siehe hier:

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

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

4
Tim Scollick

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 Kodierungskonfigurationen, die hier bearbeitet wurden:

https://supportforums.Motorola.com

1
ad rees

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.

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.

1
Mike

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 Browser Android nur Vollbild angezeigt, aber die Wiedergabe wird nicht gestartet. Getestet mit der neuesten Version von Android Browser, Chrome, Safari.

Ich habe es mit Android 2.3.3 & 4.4 getestet.

0
Behrouz.M

Es soll funktionieren, aber sehen Sie sich die Auflösung an: Android 2.0 und Webkit

Canvas funktioniert sofort, während Geolocation im Emulator anscheinend überhaupt nicht funktioniert. Natürlich muss ich es nachahmen, um es zum Laufen zu bringen, also habe ich keine Ahnung, wie das auf einem tatsächlichen Telefon aussehen würde. Das gleiche kann ich mit dem Video-Tag sagen. Es gibt Probleme damit, dass das Video nicht abgespielt wird, ABER ich denke, es liegt an der Tatsache, dass das Video eine höhere Auflösung hat als der Emulator. Wir werden mehr wissen, sobald jemand dies auf einem Motorola Droid oder einem anderen Next-Gen Android Gerät versucht

0
jesup

Dies beantwortet Ihre Frage möglicherweise nicht genau, aber wir verwenden das 3GP- oder 3GP2-Dateiformat. Es ist sogar besser, das RTSP-Protokoll zu verwenden, 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 eine Menge Probleme mit der aktuellen Implementierung von Videotags auf Android Geräten.

0
leviathan

Nach vielen Recherchen in vielen verschiedenen Geräten bin ich bisher zu dem einfachen Schluss gekommen, dass MP4 wird viel weniger unterstützt als das MOV Format. Daher verwende ich das MOV -Format, das von allen Android und Apple) -Geräten in allen Browsern unterstützt wird. Ich habe festgestellt Wenn das Gerät ein mobiles Gerät oder ein Desktop-Browser ist, stellen Sie SRC entsprechend ein:

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