jquery - playsinline - ¿iPad html5 video sin controles?

video safari html5

Question

Esto me ha estado matando todo el día, pero no estoy seguro de cómo hacer funcionar un reproductor de video html5 sin los controles nativos.

No quiero controles, pero si no los incluyo, parece que el video no quiere reproducirse, incluso si agrego algunos javascript a continuación, intento forzarlo a jugar, funciona en iPhone y en múltiples navegadores, pero no iPad que es extraño, alguna idea?

Aquí hay un margen de utilidad si es útil.

<video src="video.mp4" id="video" poster="image.jpg" onclick="this.play();"/></video>
$(''#video'').click(function(){
document.getElementById(''video'').play();
});

Answer 1

A partir de ahora, iOS 6 admite el elemento de autoplay en algunos dispositivos.

Consulte http://www.longtailvideo.com/html5/autoloop/ para referencia.

Answer 2

Lo mejor que puedo hacer es reproducir el video tan pronto como el usuario toque la pantalla para hacer cualquier cosa, incluso desplazarse hacia abajo en la página.

function playVideoNow(e)
{
document.getElementById(''video'').play();
document.removeEventListener(''touchstart'', playVideoNow);
}
document.addEventListener(''touchstart'', playVideoNow, false);

Answer 3

Por diseño, no se puede reproducir automáticamente el video, pero es lo suficientemente simple como para eliminar los controles después de que haya comenzado la reproducción, que supongo que es el efecto que realmente deseas:

<video id="video" src="video.mp4" poster="image.jpg" preload="auto" onplaying="this.controls=false"/></video>

Answer 4

Usé esto

<video id="video" controls=“true” width="300" height="250" poster="gray30x25.gif" autoplay onplaying="this.controls=false">

controls=“true” - lo hace funcionar en ipad

autoplay : hace que se reproduzca automáticamente, excepto para dispositivos móviles

onplaying="this.controls=false" - quita los controles cuando se juega

¡Se reproduce automáticamente en la computadora portátil y funciona en el iPad!
gracias Doin

Answer 5

iOS no admite el atributo de autoplay de la etiqueta de video. También parece que no se puede usar jQuery para enlazar a un evento de clic del elemento de video (ver fiddle ).

Una solución alternativa es colocar un div invisible sobre el elemento de video y vincular el clic que reproduce el video a ese (ver fiddle ):

HTML:

<div id="video-overlay"></div>
<video id="video" width="400" height="300">
<source id=''mp4''
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type=''video/mp4''>
<source id=''webm''
src="http://media.w3.org/2010/05/sintel/trailer.webm"
type=''video/webm''>
<source id=''ogv''
src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type=''video/ogg''>
</video>

CSS:

#video { border: 1px solid black; }
#video-overlay { position: absolute; width: 400px; height: 300px; z-index: 999; }

jQuery:

$(''#video-overlay'').click(function(){
document.getElementById(''video'').play();
});