2012-06-01 21 views
22

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.iPad html5 video sin controles?

No quiero controles, pero si no los incluyo, parece que el video no quiere reproducirse, incluso si agrego algunos javascript a continuación tratando de forzarlo a jugar, funciona en iPhone y múltiples navegadores, pero no iPad, lo cual 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(); 
}); 

Respuesta

13

iOS no es compatible con el atributo autoplay de la etiqueta de video. También parece que no puede usar jQuery para enlazar a un evento de clic desde el elemento de video (consulte fiddle).

Una solución consiste en colocar un div invisible sobre el elemento de vídeo y unir el clic que reproduce el vídeo para que (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(); 
}); 
+0

Gracias por la respuesta clara, voy a dar una vuelta y volver después;)) – user1370288

+0

Funcionó un encanto. – user1370288

8

Por su diseño no se puede reproducir automáticamente el vídeo, pero es lo suficientemente simple para eliminar los controles después de iniciada la reproducción, lo que supongo es el efecto que realmente quiere:

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

No estoy seguro de si 'preload =" auto "' hace algo o no en un iPad, pero no duele. – Doin

+0

¡Esto solucionó mis problemas! –

+0

Esto funcionó para mí e incluso puedo usar jQuery para agregar dinámicamente el atributo 'onplaying' a la etiqueta si alguien está usando algunos complementos de reproductor de video que ocultan la etiqueta' video' –

3

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); 
5

He utilizado este

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

controls=“true” - hace que funcione en IPAD

autoplay - hace que se reproduzca de forma automática salvo móvil

onplaying="this.controls=false" - elimina los controles cuando se reproduce

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