Élément HTML5 <video> sur Android


90

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?


2
J'ai aussi un Droid et je n'ai pas pu lire de vidéos html5. Même le site "vidéo pour tout le monde" ne fonctionne pas.
haxney

"vidéo pour tout le monde" redirigé vers une page d'accueil idiote pour moi - je ne pouvais même pas essayer de voir la seule démo sur cette page!
jmans

Placez les vidéos dans le système de fichiers interne / externe et accédez-y. Exemple: - <video controls = 'controls'> <source src = "file: /storage/sdcard0/video_name.mp4" type = 'video / mp4'>; </video>
Ravikiran

Réponses:


78

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.


1
La démo ne semble pas fonctionner sur mon Nexus One (rien ne se passe lorsque je touche "Play")
itsadok

1
BTW, le lien que vous avez donné ne fonctionne pas sur un Nexus One 2.3.3, message: cette vidéo ne peut pas être lue
Panthro

@RafaelRoman J'ai inclus et répondu, cela fonctionnera, espérons-le, dans Nexus One (du moins cela a fonctionné pour moi): stackoverflow.com/a/8952025/1108032
Boris Strandjev

Je ne parviens pas à faire fonctionner cela sur ma tablette 4.0.4. Je pense que le natif est la voie à suivre
Harry

1
Ne fonctionne pas sur Android 5.x, la vidéo est noire jusqu'à ce que vous
cliquiez sur la lecture

9

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();"/>

il y a des problèmes étranges avec cela sur les navigateurs de bureau - dans Chrome et Firefox, si vous utilisez l' controlsattribut, l'événement onclick est contourné lorsque vous appuyez sur pause (donc la vidéo est réellement mise en pause), mais d'une manière ou d'une autre, lorsque vous cliquez sur play, rien ne se passe - vous devez cliquer dans la vidéo (pas sur le bouton de lecture) pour que la vidéo reprenne.
Kip

Cela marche. Je peux lire des vidéos h264 sur Android. Les fichiers ont le suffixe mp4.
neoneye

8

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.


J'ai dû ajouter la fonction javascript playVideo (videoName) en référence à JSInterface pour que cela fonctionne - peut ne pas être évident pour les personnes qui n'ont jamais utilisé cette technique auparavant. J'ai également préféré créer le chemin complet avec getExternalDirectory () dans la fonction startVideo avec uniquement le nom du fichier transmis depuis Javascript. Cela a fonctionné pour moi, sauf que l'image de l'affiche disparaît lorsque l'activité vidéo se ferme et que le WebView revient au focus (mon WebView est intégré dans un ViewPager). Merci.
alan-p

Merci pour les commentaires. J'ai ajouté le script d'appel javascript, l'annonce également complètement d'accord avec le commentaire de la construction du chemin vidéo, mais je suppose que c'est quelque chose que tout le monde peut résoudre pour ses besoins,
Boris Strandjev

J'ai également eu l'erreur «Valeur nulle ou vide pour l'hôte d'en-tête». C'était la balise source inutilisée. Cette balise source est en fait utilisée par l'application ios (application phonegap), donc maintenant j'insère la balise source sur iOS uniquement et cela fonctionne bien. merci d'avoir aidé avec ce problème étrange.
Guillaume Gendre

5

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>

2
Cela m'amène à une icône de film sur laquelle je peux cliquer pour afficher le MP4 dans l'application vidéo, mais ne me donne toujours pas de vidéo en ligne.
jmans

La vidéo en ligne est prise en charge à partir d'Android 3.1.
Roman Nurik

Quelqu'un peut-il confirmer que cela fonctionne sur un appareil en nid d'abeille +? Je n'ai pas pu le faire fonctionner sur 3.2. J'entends le son et je ne vois aucune vidéo.
dongshengcn

4

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/


même pour moi avec html5test.com sur SGS 2.1update1. Avez-vous déjà trouvé un moyen d'intégrer la vidéo? Lorsque j'ouvre le site de test broken-links.com/tests/video et que je clique sur l'icône de lecture, la vidéo est lue mais non intégrée (comme sur le bureau / Firefox) mais s'ouvre dans le lecteur multimédia.
Mathias Conradt

Même chose ici sur mon LG Optimus Black ... mais la démo sur les liens rompus fonctionne. J'essaierai d'encoder avec le frein à main.
Pier

4

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


Correction du problème pour moi aussi. Mais mpeg4 ne fonctionnait pas pour les autres navigateurs, j'ai donc créé 2 couches vidéo. Premier mpeg4, puis h264: <video width = "480" height = "386" boucle de lecture automatique coupée en ligne de lecture> <source src = "assets / chat_letter_mpeg4.mp4" type = "video / mp4"> <! - MPEG4 pour Android - -> <source src = "assets / chat_letter_h264.mp4" type = "video / mp4"> <! - h264 pour tout le reste -> <img alt = "" src = "assets / chat_letter.png"> <! - image comme solution de secours pour IE8 -> </video>
yodalr

1

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


1

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.


1

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.


0

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


Je vais essayer de jouer avec la résolution, mais j'utilise un appareil réel et le flux vidéo (une webcam) est assez faible.
jmans

0

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.


Salut, j'ai essayé celui-ci en utilisant Android WebView, mais cela ne fonctionne pas, y a-t-il d'autres paramètres que je dois faire? J'utilise le code de ce lien .
Kris

Non, je ne connais pas d'autre moyen d'y parvenir.
leviathan

0

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.


0

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

0

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


-4

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.


Les téléphones Google ont abandonné Flash dans Android 4.0 (ICS), et cette question ne concernait de toute façon pas l'iPhone.
greg.kindel
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.