Élément <vidéo> HTML5 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 réussi à faire en sorte que cela fonctionne avec un Motorola Droid, et je n'ai pas été en mesure de visionner une vidéo sur l'une des pages d'exemples de vidéos HTML5. Comme il n’ya actuellement pas de support pour QuickTime ou Flash, c’est la seule chose à laquelle je peux penser pour incorporer une vidéo mp4 dans une page Web. Quelqu'un a-t-il eu de la chance avec ça?
Je viens de faire quelques expériences avec cela, et d'après ce que je peux vous dire, trois choses sont nécessaires:
- Vous ne devez pas utiliser l'attribut type lors de l'appel de la vidéo.
- Vous devez appeler manuellement video.play ()
- La vidéo doit être encodée selon des paramètres assez stricts. Utiliser le réglage de l'iPhone sur Handbrake avec le bouton "Web optimisé" coché fait généralement l'affaire.
Regardez la démo sur cette page: http://broken-links.com/tests/video/
Autant que je sache, tous les navigateurs de bureau compatibles 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 identique à celle de l'iPhone.
Cela vaut probablement la peine d’ajuster votre point de vue et d’attendre que la vidéo soit lue en plein écran dans sa propre application, et que le codage en soit la conséquence. Il est frustrant de constater que cliquer sur la vidéo ne suffit pas 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 que la vidéo sera lue. Je travaille actuellement sur un projet qui fait précisément cela, et les clients en sont satisfaits - et aussi qu'ils obtiennent la version Android d'une application Web gratuite, de Bien sûr, parce que le contrat concernait uniquement une application Web pour iPhone.
À titre d’illustration, une balise de travail Android est en dessous. Simple et agréable.
<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 d'affichage de vidéos en HTML dans Nexus One:
Je n'ai jamais réussi à faire jouer la vidéo en ligne. En fait, beaucoup de gens sur Internet mentionnent explicitement que la lecture de vidéos en ligne en HTML est prise en charge depuis Honeycomb, et que nous nous battions avec Froyo et Gingerbread ... Aussi pour les téléphones plus petits, je pense que jouer en plein écran est très naturel - sinon, on ne voit pas tellement . L'objectif était donc de faire en sorte que la vidéo s'ouvre en plein écran. Cependant, les solutions proposées dans ce fil ne fonctionnaient pas pour nous - un clic sur l'élément ne provoquait rien. De plus, les contrôles vidéo étaient affichés, mais aucun poster ne l'était, ce qui rendait l'expérience utilisateur encore plus étrange. Donc ce qu'il a fait était le suivant:
Exposer le code natif au HTML pour qu'il soit 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 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);
}
}
Puis, dans le code HTML lui-même, il n'arrêtait pas de faire fonctionner la balise vidéo lors de la lecture de la vidéo. Ainsi, il a finalement décidé d'écraser l'événement onclick de la vidéo, ce qui lui a permis de faire la lecture proprement dite. 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'attribut poster de la balise. Finalement, il trouva le problème, ce qui était très étrange - il s’avéra qu’il avait conservé la sous-étiquette source dans la balise video, mais ne l’avait jamais utilisée. Et assez curieusement, c’était exactement le problème. Maintenant, voyez 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 l'en-tête de la page:
<script>
function playVideo(video){
window.JSInterface.startVideo(video);
}
</script>
Je réalise que ce n’est pas une solution purement HTML, mais le meilleur 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>
pointer mon 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 ... ne semble un peu inutile à supporte l’élément video mais pas de codecs ??? sauf s’il ya un problème 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. vois 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é correctement la vidéo. Essayez ce guide pour les réglages corrects du frein à main: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694
Peut-être devez-vous 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>
Voici quelques exemples de configurations de codage qui ont fonctionné ici:
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 fichier .mp4 est au-dessus et que le fichier vidéo n’est pas trop gros.
Essayez h.264 dans un conteneur MP4. J'ai eu beaucoup de succès avec cela sur mon Droid X. J'utilise zencoder.com pour les conversions de format.
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 Android Navigateur, il passera simplement en mode plein écran mais il ne commencera pas à jouer. Testé avec la dernière version de Android Navigateur, Chrome, Safari.
Je l'ai testé sur le navigateur Android 2.3.3 & 4.4.
C'est censé fonctionner, mais regardez la résolution: Android 2.0 et webkit
Canvas fonctionne tout de suite, alors que la géolocalisation ne semble pas fonctionner du tout dans l’émulateur. Bien sûr, je dois lui envoyer des simulacres d’endroits pour que cela fonctionne, alors 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 video. Le fait de ne pas lire la vidéo pose problème, MAIS je pense que c’est le fait que la vidéo présente une résolution supérieure à celle que peut gérer l’émulateur. Nous en saurons plus si quelqu'un essaie cela sur un Motorola Droid ou un autre appareil next-gen Android
Cela pourrait ne pas répondre 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, le traitement sera renvoyé au navigateur.
Pour moi, cela résout beaucoup de problèmes avec l’implémentation actuelle des balises vidéo sur les appareils Android.
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. J'utilise donc le format MOV, qui est pris en charge par tous les appareils Android et Apple, sur tous les navigateurs. J'ai détecté si le périphérique est un périphérique 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;
}