Elemento HTML5 en Android

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 lo que hace el iPhone.

Probablemente vale la pena ajustar su punto de vista y esperar que el video se reproduzca a pantalla completa en su propia aplicación, y la codificación para eso. Es frustrante que hacer clic en el video no sea suficiente para que se reproduzca de la misma manera que el iPhone, pero ya que solo se necesita un atributo onclick para iniciar no es el fin del mundo.

Mi consejo, FWIW, es usar una imagen de póster, y hacer obvio que reproducirá el video. Estoy trabajando en un proyecto en este momento que hace precisamente eso, y los clientes están contentos con él - y también que están recibiendo la versión para Android de una aplicación web de forma gratuita, por supuesto, porque el contrato era solo para una aplicación web para iPhone.

Solo para ilustrar, una etiqueta de video de Android que funciona está a continuación. Bonito 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. En realidad, 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 luchando con Froyo y Gingerbread... También para los teléfonos más pequeños creo que jugar a pantalla completa es muy natural-de lo contrario no tanto es visible. Así que el objetivo era hacer que el video se abriera en pantalla completa. Sin embargo, las soluciones propuestas en este hilo no trabajan para nosotros - clic en el elemento desencadenado 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. Así que lo que hizo fue lo siguiente:

Exponer el código nativo al HTML para poder ser llamado 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);
    }
}

Entonces en el HTML mismo siguió fallando haz que la etiqueta de vídeo funcione reproduciendo el vídeo. Por lo tanto, finalmente decidió sobrescribir el evento onclick del video, haciendo que hiciera la reproducción real. Esto casi funcionó para él, excepto que no se exhibió ningún póster. Aquí viene la parte más extraña - él siguió recibiendo ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host" cada vez que estableció el atributo poster de la etiqueta. Finalmente encontró el problema, que era muy raro-resultó que había mantenido la subetiqueta source en la etiqueta video, pero nunca la usó. Y lo suficientemente raro exactamente esto estaba causando la problema. Ahora vea su definición de la video secció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 para el tipo de teléfono Nexus One. Todos los créditos para esta solución van a Dimitar Zlatkov Dimitrov.

Si llamas manualmente a 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 video es compatible, pero ninguno de los códecs de video listados... parece un poco inútil para apoyar el elemento de vídeo, pero no hay codecs??? a menos que haya algo mal 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 hay formatos de audio. ver 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 la configuración correcta del freno de mano: http://forum.handbrake.fr/viewtopic.php?f=7&t=9694

Tal vez usted tiene que codificar el vídeo 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

Pruebe 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 mí:

<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 videofile no es demasiado grande.

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

El lienzo funciona desde el primer momento, mientras que la geolocalización parece no funcionar en todo en el Emulador. Por supuesto, tengo para enviarlo lugares simulados para llevarlo a trabajo, así que no tengo idea de lo que esto sería como en un teléfono real. Me puede decir lo mismo con el video etiqueta. Hay problemas con que no en realidad reproduciendo el video, PERO creo que es el hecho de que el video es un mayor resolución de lo que el Emulador puede manejar. Sabremos más una vez que alguien intenta esto en un Motorola Droid u otro dispositivo Android de próxima generación

Esto puede no responder exactamente a su pregunta, pero estamos utilizando el formato de archivo 3GP o 3GP2. Incluso es mejor usar el protocolo rtsp, pero el navegador 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 vídeo. El archivo será transmitido y una vez finalizada la reproducción, el manejo será devuelto 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 Android solo irá a pantalla completa, pero lo hará no empieces a jugar. 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 MP4 es mucho menos compatible que el formato MOV. Por lo tanto, estoy utilizando el formato MOV, que es compatible con todos los dispositivos Android y Apple, en todos los navegadores. He detectado el tiempo que el dispositivo es un dispositivo móvil o un navegador de escritorio, y establecer el SRC en consecuencia:

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 es compatible con teléfonos Google (Android) como Galaxy S y iPhone. iPhone, sin embargo, no es compatible con Flash, que los teléfonos de Google hacen el apoyo.