etiqueta video de HTML5 para reproducir en pantalla completa con Android

Question

estoy creando un sitio móvil en el que tengo un video que me gustaría jugar cuando alguien hace clic en un enlace:

<div id="player"></div> 
<a href="#" onclick="DoNav('<?php echo $url; ?>');" title="Click to play video"> <?php echo $result_videos[$i]["camera_name"]; ?> </a> 

<script type="text/javascript"> 
function DoNav(theUrl) 
{ 

    // only add the player if it doesn't yet exist 
    if($('#myfileplayer').length == 0) { 
    var mydiv = $("#player"); 
    var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>"); 
    mydiv.append(myvideo); 
    } else { 
    $('#myfileplayer').attr("src",theUrl); 
    } 

} 
</script> 

Con el iPhone, funciona este genial, hago clic en video y va a pantalla completa. Android también funciona, pero requiere que haga clic en el video para reproducir y luego haga clic en la pantalla completa. ¿Es posible acceder a la pantalla completa como iPhone justo cuando presionas play?

Answer 1

Yo he renunciado a esto. Mi conclusión es que la etiqueta de video html5 en los dispositivos Android sopla pedazos. Funciona en algunos dispositivos, pero no en otros. Y no hay criterios comunes como 3.xo 4.x, simplemente parece ser aleatorio. Espero que esto mejore pronto, especialmente porque el soporte flash ya no existe.

Por extraño que se pegue con un simple href parece ser el más consistente. Pierdes algunos controles pero mucho mejor que la etiqueta de video ... al menos hasta ahora.

Answer 2

¿Has echado un vistazo mediaelement.js?

Answer 3

probar algo a lo largo de las líneas de:

document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false); 

O eso, o tal vez algo en la línea de:

document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false); 

webkitEnterFullscreen es el método de pantalla completa de un elemento VIDEO que está trabajando actualmente en iOS . No estoy seguro de la compatibilidad en dispositivos Android.

mozRequestFullScreen y webkitRequestFullScreen son implementaciones de Mozilla y la API de pantalla completa de Google que se utiliza para activar el modo de pantalla completa en prácticamente cualquier elemento DOM.

Esperemos que proporciona al menos un punto de partida para trabajar desde ...

Answer 4

La mayoría de los proveedores requieren la interacción del usuario para ir a pantalla completa, por lo que la respuesta de Natalee no funciona. Para Andriod, puede llamar webkitEnterFullScreen() dentro controlador de clic de su ancla, ya que es una interacción de usuario válido:

myvideo[0].webkitEnterFullScreen(); 
    myvideo[0].play(); 

o

$('#myfileplayer')[0].webkitEnterFullScreen(); 
    $('#myfileplayer')[0].play(); 

Nota cómo Me desnudo envoltorio de jQuery con [0]. No funciona de otra manera.

Answer 5

esto debería funcionar, la llanura Javascript:

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 reproducción() antes de la instrucción de pantalla completa, si no en navegador de Android que se acaba de ir a pantalla completa pero no va a empezar a jugar. Probado con la última versión de Android Browser, Chrome, Safari.