Elemento <video> HTML5 en Android


90

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?


2
También tengo un Droid y no he podido reproducir videos html5. Incluso el sitio de "videos para todos" no funciona.
haxney

"Video para todos" redirigido a una primera página tonta para mí. ¡Ni siquiera podía intentar ver la demostración de esa página!
jmans

Coloque los videos en el sistema de archivos interno / externo y acceda a él. Ejemplo: - <video controls = 'controls'> <source src = "file: /storage/sdcard0/video_name.mp4" type = 'video / mp4'>; </video>
Ravikiran

Respuestas:


78

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.


1
La demostración no parece funcionar en mi Nexus One (no sucede nada cuando
toco

1
Por cierto, el enlace que proporcionó no funciona en un Nexus One 2.3.3, mensaje: este video no se puede reproducir
Panthro

@RafaelRoman He incluido y respondo, que con suerte funcionará en Nexus One (al menos lo hizo para mí): stackoverflow.com/a/8952025/1108032
Boris Strandjev

No puedo hacer que esto funcione en mi tableta 4.0.4. Creo que lo nativo es el camino a seguir
Harry

1
No funciona en Android 5.x, el video es negro hasta que se hace clic en
reproducir

9

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

hay problemas extraños con esto en los navegadores de escritorio: en Chrome y Firefox, si usa el controlsatributo, el evento onclick se omite cuando presiona pausa (por lo que el video realmente se detiene), pero de alguna manera cuando hace clic en reproducir no sucede nada. tienes que hacer clic en el video (no en el botón de reproducción real) para que el video se reanude.
Kip

Esto funciona. Puedo reproducir videos h264 en Android. Los archivos tienen el sufijo mp4.
neoneye

8

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.


Tuve que agregar la función de javascript playVideo (videoName) con referencia a JSInterface para que esto funcione; puede que no sea evidente para las personas que no han usado esta técnica antes. También preferí construir la ruta completa con getExternalDirectory () en la función startVideo con solo el nombre del archivo pasado desde Javascript. Me funcionó, excepto que la imagen del póster desaparece cuando la actividad de video se cierra y WebView vuelve a enfocarse (mi WebView está incrustado en un ViewPager). Gracias.
alan-p

Gracias por los comentarios. He agregado el script de llamada javascript, y también estoy completamente de acuerdo con el comentario de la construcción de la ruta del video, sin embargo, supongo que esto es algo que todos pueden arreglar para sus necesidades,
Boris Strandjev

También tuve el error "Valor nulo o vacío para el host de encabezado". Era la etiqueta de origen no utilizada. Esta etiqueta de origen en realidad es utilizada por la aplicación ios (aplicación phonegap), por lo que ahora estoy insertando la etiqueta de origen solo en ios y está funcionando bien. gracias por ayudar con este extraño problema.
Guillaume Gendre

5

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>

2
Esto me lleva a un ícono de película en el que puedo hacer clic para ver el MP4 en la aplicación de video, pero aún no me da video en línea.
jmans

El video en línea es compatible a partir de Android 3.1.
Roman Nurik

¿Alguien puede confirmar que esto funciona en un dispositivo Honeycomb +? No pude hacerlo funcionar en 3.2. Puedo escuchar el sonido y no veo ningún video.
dongshengcn

4

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/


Lo mismo para mí con html5test.com en SGS 2.1update1. ¿Ya encontraste una manera de insertar videos? Cuando abro el sitio de prueba broken-links.com/tests/video y hago clic en el ícono de reproducción, el video se reproduce pero no incrustado (como en el escritorio / Firefox) pero se abre en el reproductor multimedia.
Mathias Conradt

Lo mismo aquí en mi LG Optimus Black ... pero la demostración de enlaces rotos funciona. Intentaré codificar con freno de mano.
Muelle

4

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


También me solucionó el problema. Pero mpeg4 no funcionó para otros navegadores, así que creé 2 capas de video. Primero mpeg4 y luego h264: <video width = "480" height = "386" bucle de reproducción automática silenciado PlaySinline> <source src = "assets / chat_letter_mpeg4.mp4" type = "video / mp4"> <! - MPEG4 para Android - -> <source src = "assets / chat_letter_h264.mp4" type = "video / mp4"> <! - h264 para todo lo demás -> <img alt = "" src = "assets / chat_letter.png"> <! - imagen como respaldo para IE8 -> </video>
yodalr

1

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


1

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.


1

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.


0

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


Intentaré jugar con la resolución, pero estoy usando un dispositivo real y la transmisión de video (una cámara web) es bastante baja.
jmans

0

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.


Hola, probé este usando Android WebView, pero no funciona, ¿hay alguna otra configuración que deba hacer? Estoy usando el código en este enlace .
Kris

No, no conozco otra forma de lograrlo.
leviatán

0

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.


0

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

0

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


-4

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.


Los teléfonos de Google lanzaron Flash en Android 4.0 (ICS), y esta pregunta no era sobre iPhone de todos modos.
greg.kindel
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.