Élément HTML5 sur Android

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

Il vaut probablement la peine d'ajuster votre point de vue et de s'attendre à ce que la vidéo soit jouée en plein écran dans sa propre application, et de coder pour cela. Il est frustrant que cliquer sur la vidéo ne soit pas suffisant pour la faire jouer de la même manière que l'iPhone, mais vu qu'il ne faut qu'un attribut onclick pour lancer elle, c'est pas la fin du monde.

Mon conseil, FWIW, est d'utiliser une image d'affiche, et de rendre évident qu'elle va lire la vidéo. Je travaille sur un projet en ce moment qui fait précisément cela, et les clients sont heureux avec elle - et aussi qu'ils obtiennent la version Android d'une application web gratuitement, bien sûr, parce que le contrat était seulement pour une application web iPhone.

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

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

Ici, j'inclus 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 pu faire jouer la vidéo en ligne. En fait, beaucoup de gens sur internet mentionnent explicitement que le jeu vidéo en ligne en HTML est pris en charge depuis Honeycomb, et nous nous battions avec Froyo et Gingerbread... Aussi pour les petits téléphones, je pense que jouer en plein écran est très naturel-sinon pas tellement est visible. L'objectif était donc de rendre la vidéo ouverte en plein écran. Cependant, les solutions proposées dans ce fil n'ont pas fonctionné pour nous-cliquer sur l'élément n'a rien déclenché. De plus, les contrôles vidéo ont été affichés, mais aucune affiche n'a été affichée, de sorte que l'expérience utilisateur était encore plus étrange. Donc, ce qu'il a fait était le suivant:

Expose le code natif au code HTML pour être appelé via javascript:

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

Le code lui-même, avait une fonction qui appelait l'activité native 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);
    }
}

Ensuite, dans le HTML lui-même, il a continué à échouer faites fonctionner la balise vidéo en jouant la vidéo. Ainsi, il a finalement décidé d'écraser l'événement onclick de la vidéo, ce qui lui permet de faire le jeu réel. Cela a presque fonctionné pour lui-sauf qu'aucune affiche n'a été affichée. Voici la partie la plus étrange - il a continué à recevoir ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host" chaque fois qu'il a défini l'attribut poster 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é le source subtag dans le video tag, mais jamais utilisé. Et assez bizarre exactement cela causait le problème. Voir maintenant sa définition de la section 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>

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 une solution purement HTML, mais c'est le meilleur que nous avons pu faire pour le type de téléphone Nexus One. Tous les crédits pour cette solution vont à Dimitar Zlatkov Dimitrov.

Si vous appelez manuellement video.play() cela devrait fonctionner:

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

Pointant mon navigateur Android 2.2 vers html5test.com , me dit que l'élément vidéo est pris en charge, mais aucun des codecs vidéo répertoriés... semble un peu inutile de supporter l'élément vidéo mais pas de codecs??? sauf s'il y a quelque chose qui ne va pas avec cette page de test.

Cependant, j'ai trouvé le même genre de situation avec l'élément audio: 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/

Rien n'a fonctionné pour moi jusqu'à ce que j'ai encodé la vidéo correctement. Essayez ce guide pour les paramètres de frein à main corrects: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

Peut-être que vous devez encoder la vidéo spécifiquement pour l'appareil, par exemple:

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

Il y a quelques exemples de configurations d'encodage qui ont fonctionné ici:

Https://supportforums.motorola.com

Essayez H. 264 dans un conteneur mp4. J'ai eu beaucoup de succès avec mon Droid X. j'ai utilisé zencoder.com pour les conversions de format.

Cela fonctionne pour moi:

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

Seulement lorsque le .mp4 est en haut et que le videofile n'est pas trop gros.

C'est censé fonctionner, mais regardez la résolution: Android 2.0 et webkit

Canvas fonctionne dès la sortie de la boîte, alors que la Géolocalisation semble ne pas fonctionner à tous dans l'Émulateur. Bien sûr, j'ai pour l'envoyer des emplacements fictifs pour l'obtenir travail, donc je n'ai aucune idée de ce que cela serait comme sur un téléphone. Je peut dire la même chose avec la vidéo balise. Il y a des problèmes avec elle en fait jouer la vidéo, mais je pense que c'est le fait que la vidéo est un plus haute résolution que ce que le Émulateur peut gérer. Nous en saurons plus une fois que quelqu'un essaie cela sur un Motorola Droid ou autre appareil Android de nouvelle génération

Cela ne répond peut-être pas exactement à votre question, mais nous utilisons le format de fichier 3GP ou 3GP2. Mieux vaut même utiliser le protocole rtsp, mais le navigateur Android reconnaîtra également le format de fichier 3GP.

Vous pouvez utiliser quelque chose comme

self.location = URL_OF_YOUR_3GP_FILE

Pour déclencher le lecteur vidéo. Le fichier sera diffusé en continu et après la fin de la lecture, la gestion est renvoyée au navigateur.

Pour moi, cela résout beaucoup de problèmes avec l'implémentation actuelle des balises vidéo sur les appareils android.

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

Cela devrait fonctionner, avec JavaScript simple:

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

Vous devez déclencher play () avant l'instruction plein écran, sinon dans le Navigateur Android il ira juste en plein écran mais il le fera ne pas commencer à jouer. Testé avec la dernière version du navigateur Android, Chrome, Safari.

Je l'ai testé sur Android 2.3.3 et 4.4 navigateur.

Après de nombreuses recherches, dans de nombreux appareils différents, jusqu'à présent, j'en suis arrivé à la conclusion simple que MP4 est beaucoup moins supporté que le format MOV. Donc, j'utilise le format MOV, qui est pris en charge par tous les appareils Android et Apple, sur tous les navigateurs. J'ai détecté le temps que l'appareil est un appareil mobile ou un navigateur de bureau, et définissez le SRC en conséquence:

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

HTML5 est pris en charge sur les téléphones Google (android) tels que Galaxy S et iPhone. l'iPhone ne prend cependant pas en charge Flash, que les téléphones Google prennent en charge.