jquery - varios - video html5 autoplay

Haga clic en la imagen del póster que reproduce el video HTML5.

Question

Tengo un video HTML5 con un atributo de poster. 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 se disparará el evento de juego 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.

Answer 1

Estaba haciendo esto en reaccionar y es6. Aquí hay una versión moderna que hice después de leer la solución de Daniel Golden:

const Video = ({videoSources, poster}) => {
  return (
    <video
      controls
      poster={poster}
      onClick={({target: video}) => video.paused ? video.play() : video.pause()}
    >
      {_.map(videoSources, ({url, type}, i) =>
        <source key={i} src={url} type={type} />
      )}
    </video>
  )
}

Answer 2

Esto está funcionando para mí, Andrew.

En tu cabeza html agrega esta pequeña pieza de js:

var video = document.getElementById(''video'');
video.addEventListener(''click'',function(){
    video.play();
},false);

O simplemente agrega un atributo onlick directamente a tu elemento html:

<video src="your_video" width="250" height="50" poster="your_image" onclick="this.play();"/>

Answer 3

Publicado esto here también, pero esto se aplica a este hilo también.

Tuve innumerables problemas al hacer esto pero finalmente se me ocurrió una solución que funciona.

Básicamente, el código siguiente agrega un manejador 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();
    }
});

Answer 4

Sí, eso suena como una función normal que los creadores del navegador o los escritores de especificaciones html simplemente "olvidaron".

He escrito un par de soluciones, pero ninguna de ellas es realmente cross browser o 100% sólida. Incluir problemas al hacer clic en los controles de video tiene la consecuencia involuntaria de detener el video. En su lugar, recomendaría que utilice una solución probada, como VideoJS: http://videojs.com/

Answer 5

Usar el atributo poster no altera el comportamiento. Simplemente muestra esa imagen mientras carga el video. Si el video se inicia automáticamente (si la implementación del navegador no lo hace), entonces tienes que hacer algo como:

<video id="video" ...></video>

en javascript usando jquery:

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

Espero eso ayude

Answer 6

Usar get (0) también funciona

    var play = $(''.playbutton'');
    var video = $(''#video'');
    play.click(function(){
        video.get(0).play();
    })

Answer 7

<script type="text/javascript">
    function actualNextSibling(el) {    // needed to smooth out default firefox/IE behavior
        do { el = el.nextSibling } while (el && el.nodeType !== 1);
            return el;
    }
</script>
<div onclick="actualNextSibling(this).style.display=''block''; this.style.display=''none''">
    <img src="splash.jpg" alt="splash" style="cursor: pointer" />
</div>
<div style="display: none">
    <iframe width="440" height="248" src="//www.youtube.com/embed/9FOZEbEpyA8?rel=0&autoplay=1"frameborder="0" allowfullscreen></iframe>
</div>