Tengo un video HTML5 con un atributo de póster. Me gustaría configurarlo de alguna manera para que pueda hacer clic en cualquier parte del elemento de video (el área de la imagen del póster) y disparará el evento de reproducción y comenzará el video. Siento que esta es una práctica bastante estándar, pero no puedo encontrar una manera de hacerlo sin flash. Cualquier ayuda sería muy apreciada.
Esto está funcionando para mí Andrew.
En su cabeza html, agregue esta pequeña pieza de js:
var video = document.getElementById('video'); video.addEventListener('click',function(){ video.play(); },false);O simplemente agregue un atributo onlick directamente a su elemento html:
<video src="your_video" width="250" height="50" poster="your_image" onclick="this.play();"/>Publiqué esto aquí también, pero esto también se aplica a este hilo.
Tuve innumerables problemas al hacer esto, pero finalmente se me ocurrió una solución que funciona.
Básicamente, el siguiente código agrega un controlador de clics al video pero ignora todos los clics en la parte inferior (0.82 es arbitrario pero parece funcionar en todos los tamaños).
$("video").click(function(e){ // handle click if not Firefox (Firefox supports this feature natively) if (typeof InstallTrigger === 'undefined') { // get click position var clickY = (e.pageY - $(this).offset().top); var height = parseFloat( $(this).height() ); // avoids interference with controls if (clickY > 0.82*height) return; // toggles play / pause this.paused ? this.play() : this.pause(); } });Usar el atributo poster no altera el comportamiento. Simplemente muestra esa imagen mientras carga el video. Tener el video para comenzar automáticamente (si la implementación del navegador no lo hace), entonces debe hacer algo como:
<video id="video" ...></video>
en javascript usando jquery:
$('#video').click(function(){ document.getElementById('video').play(); });Espero eso ayude