android - force - video autoplay mobile chrome

Elemento HTML5<video> en Android

Question

De acuerdo a:

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

Android 2.0 debería ser compatible con el elemento de video HTML5. No he podido hacer que esto funcione con un Motorola Droid, y no he podido ver con éxito un video en ninguna de las páginas de ejemplo de video HTML5. Dado que actualmente no es compatible con QuickTime o Flash, esta es la única otra cosa que se me ocurre para incrustar video mp4 en una página web. ¿Alguien ha tenido algo de suerte con esto?

Answer 1

Acabo de hacer algo de experimentación con esto, y por lo que puedo decir, necesitas tres cosas:

1. No debe usar el atributo de tipo cuando llame al video.
2. Debes llamar manualmente a video.play ()
3. El video debe estar codificado según algunos parámetros bastante estrictos; utilizar la configuración de iPhone en el Freno de mano con el botón "Optimizado para la web" suele ser el truco.

Echa 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 JS:

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

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

Answer 2

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 en 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 nos funcionaron, al hacer clic en el elemento no se activó 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:

Exponer el código nativo al HTML para que se pueda llamar mediante 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 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 código HTML en sí, siguió fallando para que la etiqueta de video funcionara al reproducir el video. Por lo tanto, finalmente decidió sobrescribir el evento onclick del video, lo que lo convierte en la obra real. Esto casi funcionó para él, a excepción de que no se mostró ningún póster. Aquí viene la parte más extraña: siguió recibiendo ERROR/AndroidRuntime(7391): java.lang.RuntimeException: Null or empty value for header "Host" cada vez que configuraba el atributo poster de la etiqueta. Finalmente encontró el problema, que fue muy extraño: resultó que había conservado la etiqueta secundaria en la etiqueta de video , pero nunca la había usado. Y lo suficientemente extraño exactamente esto estaba causando el problema. Ahora vea su definición de la sección de 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>

Por supuesto, también necesita 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 esto 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.

Answer 3

De acuerdo con: https://.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 disparar a play () antes de la instrucción a pantalla completa, de lo contrario en el navegador de Android irá a pantalla completa, pero no comenzará a reproducirse. Probado con la última versión de Android Browser, Chrome, Safari.

Lo probé en el navegador Android 2.3.3 y 4.4.

Answer 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 usando el formato MOV , que es compatible con todos los dispositivos Android y Apple, en todos los navegadores. Detecté que el dispositivo es un dispositivo móvil o un navegador de escritorio, y configuré el SRC 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;
}

Answer 5

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.

Answer 6

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

Answer 7

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 valga la pena ajustar su punto de vista y esperar que el video se reproduzca en pantalla completa en su propia aplicación, y codificar para eso. Es frustrante que hacer clic en el video no sea suficiente para reproducirlo de la misma forma 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 en claro 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 obteniendo la versión de Android de una aplicación web gratis, por supuesto, porque el contrato era solo para un aplicación web para iPhone.

Solo a título ilustrativo, a continuación se incluye una etiqueta de video de Android que funciona. Agradable y simple.

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

Answer 8

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

Answer 9

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

Answer 10

Puede que esto no responda exactamente a su pregunta, pero estamos usando el formato de archivo 3GP o 3GP2. Mejor incluso usar 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 después de que finalice la reproducción, el manejo se devuelve al navegador.

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

Answer 11

Se supone que debe funcionar, pero mire la resolución: Android 2.0 y webkit

Canvas funciona desde el primer momento, mientras que Geolocation parece no funcionar en absoluto en el emulador. Por supuesto, tengo que enviarlo simulando ubicaciones para que funcione, por lo 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 se reproduzca el video, PERO creo que es el hecho de que el video tiene una resolución superior a la que puede manejar el Emulador. Sabremos más una vez que alguien intente esto en un Motorola Droid u otro dispositivo Android de próxima generación

Answer 12

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

Answer 13

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

Answer 14

apuntar mi navegador android 2.2 a html5test.com , me dice que el elemento de video es compatible, pero ninguno de los codecs de video enumerados ... parece un poco inútil para soportar el elemento de video pero no los codecs ??? a menos que haya algo mal con esa página de prueba.

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

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