Élément HTML5 <video> sur Android

Selon:

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

Android 2.0 devrait prendre en charge l'élément vidéo HTML5. Je n'ai pas été en mesure de faire fonctionner cela à l'aide d'un Motorola Droid, et je n'ai pas pu visionner avec succès une vidéo sur l'une des pages d'exemple de vidéo HTML5. Comme il n'y a actuellement pas de support pour QuickTime ou Flash, c'est la seule autre chose à laquelle je puisse penser pour intégrer une vidéo mp4 dans une page Web. Quelqu'un at-il eu de la chance avec ça?

Je viens de faire quelques expériences avec cela, et d'après ce que je peux dire, vous avez besoin de trois choses:

1. Vous ne devez pas utiliser l' attribut type lors de l'appel de la vidéo.
2. Vous devez appeler manuellement video.play ()
3. La vidéo doit être encodée selon des paramètres assez stricts; L'utilisation du paramètre iPhone sur Handbrake avec le bouton «Web Optimisé» coché fait généralement l'affaire.

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

Cela fonctionne, AFAIK, dans tous les navigateurs de bureau vidéo, iPhone et Android.

Voici le balisage:

<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 ceci dans le JS:

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

J'ai testé cela sur un Samsung Galaxy S et cela fonctionne bien.

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

Cela vaut probablement la peine d'ajuster votre point de vue et de vous attendre à ce que la vidéo soit lue en plein écran dans sa propre application, et codée 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 comme il suffit d'un attribut onclick pour la lancer, ce n'est pas la fin du monde.

Mon conseil, FWIW, est d'utiliser une image d'affiche et de montrer clairement qu'elle va lire la vidéo. Je travaille actuellement sur un projet qui fait exactement cela, et les clients en sont satisfaits - et aussi qu'ils obtiennent la version Android d'une application Web gratuitement, bien sûr, car le contrat était uniquement pour un Application Web iPhone.

Juste à titre d'illustration, une balise vidéo Android fonctionnelle est ci-dessous. Sympa et simple.

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

J'inclus ici comment un de mes amis a résolu le problème de l'affichage de 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 la lecture vidéo en ligne en HTML est prise en charge depuis Honeycomb, et nous nous sommes battus avec Froyo et Gingerbread ... Aussi pour les petits téléphones, je pense que jouer en plein écran est très naturel - sinon, ce n'est pas tellement visible. . Le but était donc de rendre la vidéo ouverte en plein écran. Cependant, les solutions proposées dans ce fil de discussion 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, l'expérience utilisateur était donc encore plus étrange. Donc, ce qu'il a fait était le suivant:

Exposez le code natif au HTML pour qu'il puisse ê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 n'arrêtait pas de faire fonctionner la balise vidéo pour lire la vidéo. Ainsi, finalement, il a décidé d'écraser l' onclickévénement de la vidéo, en lui faisant jouer 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 continuait à recevoir ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"chaque fois qu'il définissait l' posterattribut de la balise. Finalement, il a trouvé le problème, ce qui était très étrange - il s'est avéré qu'il avait conservé la sourcesous - étiquette dans l' videoétiquette, mais ne l'avait jamais utilisée. Et c'est assez étrange exactement ce qui causait le problème. Maintenant, voyez sa définition de la videosection:

<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 en tête de 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 mieux que nous ayons 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 prendre en charge l'élément vidéo mais pas de codecs ??? sauf si quelque chose 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 aucun format audio. vois ici:

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

Rien n'a fonctionné pour moi jusqu'à ce que j'encode la vidéo correctement. Essayez ce guide pour les réglages corrects du frein à main: 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 ça sur mon Droid X. J'utilise 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 au-dessus et que le fichier vidéo n'est pas trop gros.

Il est censé fonctionner, mais surveillez la résolution: Android 2.0 et webkit

Canvas fonctionne dès la sortie de la boîte, tandis que la géolocalisation semble ne pas fonctionner du tout dans l'émulateur. Bien sûr, je dois lui envoyer des emplacements fictifs pour qu'il fonctionne, donc je n'ai aucune idée de ce que ce serait sur un téléphone réel. Je peux dire la même chose avec la balise vidéo. Il y a des problèmes avec le fait qu'il ne joue pas réellement la vidéo, MAIS je pense que c'est le fait que la vidéo est une résolution plus élevée que ce que l'émulateur peut gérer. Nous en saurons plus une fois que quelqu'un essaiera ceci sur un Motorola Droid ou un 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é et une fois la lecture terminée, la gestion est renvoyée au navigateur.

Pour moi, cela résout beaucoup de problèmes avec la mise en œuvre actuelle des balises vidéo sur les appareils Android.

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

Cela devrait fonctionner, avec du Javascript brut:

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 passera simplement en plein écran mais il ne commencera pas à jouer. Testé avec la dernière version du navigateur Android, Chrome, Safari.

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

Après de nombreuses recherches, sur de nombreux appareils différents, jusqu'à présent, je suis arrivé à la conclusion simple qui MP4est beaucoup moins prise en charge que le MOVformat. Donc, j'utilise le MOVformat, qui est pris en charge par tous les appareils Android et Apple, sur tous les navigateurs. J'ai détecté la météo, l'appareil est un appareil mobile ou un navigateur de bureau, et configurez le en SRCconsé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;
}

J'ai essayé d'utiliser le .mp4format pour lire une vidéo sur des appareils Android, mais cela ne s'est pas bien passé. Donc, après quelques essais et erreurs, j'ai converti la vidéo au .webmformat et au code suivant sans javascript ou JQuery supplémentaire:

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

Cela fonctionnait sur un appareil Android plus ancien (au moins quelques années en 2020).

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