90 votes

HTML5 <video>élément sur Android</video>

Selon:

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

Android 2.0 devrait soutenir l'élément HTML5 video. Je n'ai pas été en mesure d'obtenir ce travail à l'aide d'un Motorola Droid, et je n'ai pas réussi à visionner une vidéo sur l'un de la vidéo HTML5 exemple, les pages sont là. Depuis, il n'est actuellement pas en charge de QuickTime ou Flash, c'est la seule chose que je peux penser pour l'incorporation de la mp4 vidéo dans une page web. Personne n'a jamais eu de chance avec cette?

79voto

stopsatgreen Points 1026

Je viens de faire quelques essais avec cela, et à partir de ce que je peux dire vous avez besoin de trois choses:

  1. Vous ne devez pas utiliser le type de l'attribut lors de l'appel de la vidéo.
  2. Vous devez manuellement appel vidéo.play()
  3. La vidéo doit être codé pour certains assez stricte des paramètres; l'utilisation de l'iPhone réglage Frein à main avec le "Web Optimisé" bouton coché fait habituellement le tour.

Jetez un oeil à la démo sur cette page: http://broken-links.com/tests/video/

Cela fonctionne, autant que je sache, dans tous les vidéo les navigateurs de bureau, iPhone et Android.

Voici la syntaxe:

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

Et j'ai cela dans le JS:

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

J'ai testé sur un Samsung Galaxy S et il fonctionne très bien.

9voto

Irregular Shed Points 51

Romain réponse a bien fonctionné pour moi - ou au moins, elle m'a donné ce que j'attendais. L'ouverture de la vidéo dans le téléphone de l'application native est exactement le même que ce que l'iPhone ne.

C'est probablement la peine d'ajuster votre point de vue et attendre la vidéo pour être joué en plein écran dans sa propre application, et de codage pour que. C'est frustrant qu'en cliquant sur la vidéo n'est pas suffisant pour faire jouer de la même manière que l'iPhone, mais, voyant que cela prend seulement un attribut onclick pour le lancer, c'est pas la fin du monde.

Mon conseil, FWIW, est d'utiliser une image d'affiche, et de le rendre évident qu'il va jouer la vidéo. Je suis en train de travailler sur un projet en ce moment qui n'est précisément que, et les clients sont heureux avec elle - et aussi qu'ils ont la version Android d'une application web pour libre, bien sûr, parce que le contrat n'était que pour un iPhone application web.

Juste pour illustration, un travail Android balise vidéo est ci-dessous. Simple et sympathique.

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

8voto

Boris Strandjev Points 18480

Ici, je comprend comment un de mes amis a résolu le problème de l'affichage des vidéos en HTML dans Nexus One:

Je n'ai jamais été en mesure de faire la lecture de la vidéo en ligne. En fait beaucoup de gens sur l'internet de mentionner explicitement que la vidéo en ligne jouer en HTML est supporté depuis en Nid d'abeille, et nous nous battions avec Froyo et Gingerbread... Aussi pour les petits téléphones, je pense que le jeu en plein écran est très naturelle, - sinon, pas beaucoup est visible. Donc, le but était de faire de la vidéo de l'ouvrir en plein écran. Cependant, les solutions proposées dans ce fil n'a pas de travail pour nous - cliquant sur l'élément a déclenché rien. En outre, la vidéo, les contrôles ont été affichés, mais pas d'affiche a été affichée et l'expérience utilisateur était encore plus étrange. Donc, ce qu'il fait est la suivante:

Exposer le code natif pour le code HTML afin d'être appelable via javascript:

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

Le code lui-même, avait une fonction qui a appelé natif de l'activité pour lire la vidéo:

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

Puis dans le code HTML lui-même il continuait à défaut de faire de la vidéo tag travailler la lecture de la vidéo. Ainsi, il a finalement décidé de remplacer l' onclick cas de la vidéo, la rendant de faire le même jeu. Ce presque a travaillé pour lui - sauf pour pas poster a été affiché. Voici le plus curieux, - il a continué à recevoir ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host" tous les temps, il a mis l' poster attribut de la balise. Enfin il a trouvé le problème, ce qui était très bizarre, il s'est avéré qu'il avait gardé l' source subtag dans l' video balise, mais jamais utilisé. Et assez étrange exactement ce qui a provoqué le problème. Maintenant voir sa définition de l' video section:

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

Bien sûr, vous devez également ajouter la définition de la fonction javascript dans le head de la page:

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

Je me rends compte que ce n'est pas purement HTML solution, mais c'est le meilleur que nous avons pu faire pour le Nexus One type de téléphone. Tous les crédits en faveur de cette solution aller à Dimitar Zlatkov Dimitrov.

5voto

Roman Nurik Points 18632

Si vous appelez manuellement `` cela devrait fonctionner :

4voto

pointant mon navigateur pour android 2.2 html5test.comme dit que l'élément vidéo est pris en charge, mais aucun de la liste de codecs vidéo... semble un peu inutile à l'appui de l'élément vidéo, mais pas de codecs??? sauf s'il ya quelque chose de mal avec cette page de test.

cependant, je n'ai trouver le même genre de situation avec le son élément: l'élément est pris en charge, mais pas de formats audio. voir ici:

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X