Elemento <video> HTML5 en Android

De acuerdo a:

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

Android 2.0 debería admitir el elemento de video HTML5. No he podido hacer que esto funcione con un Motorola Droid, y no he podido ver correctamente un video en ninguna de las páginas de ejemplo de video HTML5 que existen. Dado que actualmente no hay soporte para QuickTime o Flash, esta es la única otra cosa en la que puedo pensar para incrustar video mp4 en una página web. ¿Alguien ha tenido suerte con esto?

Acabo de experimentar un poco con esto y, por lo que puedo decir, necesitas tres cosas:

1. No debe utilizar el atributo type cuando llame al video.
2. Debe llamar manualmente a video.play ()
3. El video debe estar codificado con algunos parámetros bastante estrictos; usar la configuración del iPhone en Handbrake con el botón 'Web Optimized' marcado generalmente funciona.

Eche un vistazo a la demostración en esta página: http://broken-links.com/tests/video/

Esto funciona, AFAIK, en todos los navegadores de escritorio habilitados para video, iPhone y Android.

Aquí está el marcado:

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

Y tengo esto en el JS:

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

Probé esto en un Samsung Galaxy S y funciona bien.

La respuesta de Roman funcionó bien para mí, o al menos, me dio lo que esperaba. Abrir el video en la aplicación nativa del teléfono es exactamente lo mismo que hace el iPhone.

Probablemente valga la pena ajustar su punto de vista y esperar que el video se reproduzca en pantalla completa en su propia aplicación y codificarlo. Es frustrante que hacer clic en el video no sea suficiente para que se reproduzca de la misma manera que lo hace el iPhone, pero dado que solo se necesita un atributo onclick para iniciarlo, no es el fin del mundo.

Mi consejo, FWIW, es usar una imagen de póster y dejar claro que reproducirá el video. En este momento estoy trabajando en un proyecto que hace precisamente eso, y los clientes están contentos con él, y también que están obteniendo la versión de Android de una aplicación web gratis, por supuesto, porque el contrato era solo por un Aplicación web para iPhone.

A modo de ilustración, a continuación se muestra una etiqueta de video de Android que funciona. Agradable y sencillo.

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

Aquí incluyo cómo un amigo mío resolvió el problema de mostrar videos en HTML en Nexus One:

Nunca pude hacer que el video se reprodujera en línea. De hecho, muchas personas en Internet mencionan explícitamente que la reproducción de video en línea en HTML es compatible desde Honeycomb, y estábamos peleando con Froyo y Gingerbread ... También para teléfonos más pequeños, creo que jugar a pantalla completa es muy natural; de lo contrario, no tanto es visible . Entonces, el objetivo era hacer que el video se abriera en pantalla completa. Sin embargo, las soluciones propuestas en este hilo no funcionaron para nosotros: hacer clic en el elemento no desencadenó nada. Además, se mostraron los controles de video, pero no se mostró ningún póster, por lo que la experiencia del usuario fue aún más extraña. Entonces lo que hizo fue lo siguiente:

Exponga el código nativo al HTML para que se pueda llamar a través de javascript:

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

El código en sí tenía una función que llamaba a la actividad nativa para reproducir el video:

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

Luego, en el propio HTML, siguió fallando en hacer que la etiqueta de video funcionara al reproducir el video. Por lo tanto, finalmente decidió sobrescribir el onclickevento del video, haciendo que hiciera la reproducción real. Esto casi funcionó para él, excepto que no se mostró ningún cartel. Aquí viene la parte más extraña: seguía recibiendo ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host"cada vez que configuraba el posteratributo de la etiqueta. Finalmente encontró el problema, que era muy extraño: resultó que había mantenido la sourcesubetiqueta en la videoetiqueta, pero nunca la usó. Y bastante extraño exactamente esto estaba causando el problema. Ahora vea su definición de la videosección:

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

Por supuesto, también debe agregar la definición de la función javascript en el encabezado de la página:

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

Me doy cuenta de que esta no es una solución puramente HTML, pero es lo mejor que pudimos hacer con el tipo de teléfono Nexus One. Todos los créditos de esta solución van a Dimitar Zlatkov Dimitrov.

Si lo llama manualmente video.play(), debería funcionar:

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

apuntando mi navegador Android 2.2 a html5test.com , me dice que el elemento de video es compatible, pero ninguno de los códecs de video enumerados ... parece un poco inútil admitir el elemento de video pero no hay códecs. a menos que haya algún problema con esa página de prueba.

sin embargo, encontré el mismo tipo de situación con el elemento de audio: el elemento es compatible, pero no formatos de audio. mira aquí:

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

Nada funcionó para mí hasta que codifiqué el video correctamente. Pruebe esta guía para obtener la configuración correcta del freno de mano: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

Tal vez tenga que codificar el video específicamente para el dispositivo, por ejemplo:

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

Hay algunos ejemplos de configuraciones de codificación que funcionaron aquí:

https://supportforums.motorola.com

Prueba h.264 en un contenedor mp4. He tenido mucho éxito con él en mi Droid X. He estado usando zencoder.com para conversiones de formato.

Esto funciona para mi:

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

Solo cuando el .mp4 está en la parte superior y el archivo de video no es demasiado grande.

Se supone que funciona, pero mira la resolución: Android 2.0 y webkit

Canvas funciona desde el primer momento, mientras que la geolocalización parece no funcionar en absoluto en el emulador. Por supuesto, tengo que enviarle ubicaciones simuladas para que funcione, así que no tengo idea de cómo sería esto en un teléfono real. Puedo decir lo mismo con la etiqueta de video. Hay problemas con que no reproduzca el video, PERO creo que es el hecho de que el video tiene una resolución más alta que la que puede manejar el Emulador. Sabremos más una vez que alguien pruebe esto en un Motorola Droid u otro dispositivo Android de próxima generación

Es posible que esto no responda exactamente a su pregunta, pero estamos usando el formato de archivo 3GP o 3GP2. Mejor incluso utilizar el protocolo rtsp, pero el navegador de Android también reconocerá el formato de archivo 3GP.

Puedes usar algo como

self.location = URL_OF_YOUR_3GP_FILE

para activar el reproductor de video. El archivo se transmitirá y, una vez finalizada la reproducción, la gestión se devolverá al navegador.

Para mí, esto resuelve muchos problemas con la implementación actual de etiquetas de video en dispositivos Android.

Según: https://stackoverflow.com/a/24403519/365229

Esto debería funcionar, con 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();
}

Tienes que activar play () antes de la instrucción de pantalla completa; de lo contrario, en el navegador de Android pasará a pantalla completa pero no comenzará a reproducirse. Probado con la última versión del navegador Android, Chrome, Safari.

Lo he probado en el navegador Android 2.3.3 y 4.4.

Después de mucha investigación, en muchos dispositivos diferentes, hasta ahora, he llegado a la simple conclusión de que MP4es mucho menos compatible que el MOVformato. Entonces, estoy usando el MOVformato, que es compatible con todos los dispositivos Android y Apple, en todos los navegadores. He detectado si el dispositivo es un dispositivo móvil o un navegador de escritorio, y configuré en SRCconsecuencia:

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

Intenté usar el .mp4formato para reproducir un video en dispositivos Android, pero no funcionó bien. Entonces, después de algunas pruebas y errores, convertí el video al .webmformato y el siguiente código sin javascript o JQuery adicionales:

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

Funcionó en un dispositivo Android más antiguo (al menos unos años a partir de 2020).

HTML5 es compatible con teléfonos de Google (Android) como Galaxy S y iPhone. Sin embargo, iPhone no es compatible con Flash, que sí admiten los teléfonos de Google.