Click the poster image the HTML5 video plays?

Question

I have an HTML5 video with a poster attribute. I would like to somehow set it up so that you can click on anywhere on the video element (the area of the poster image) and it

Answer 1

Using the poster attribute does not alter the behavior. It just shows that image while loading the video. Having the video to automatically start (if the browser implementation does not do that), then you have to do something like:

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

in javascript using jquery:

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

Hope it helps

Answer 2

This is working for me Andrew.

In your html head add this small piece of js:

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

Or, just add an onlick attribute directly to your html element:

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

Answer 3

Yes, that sounds like a regular feature the browser creators or html spec writers just "forgot".

I've written a couple solutions but none of them are truly cross browser or 100% solid. Including problems with clicking on the video controls has the unintended consequence of stopping the video. Instead I would recommend you use a proven solution such as VideoJS: http://videojs.com/

Answer 4

I was doing this in react and es6. Here is a modern version I made after reading Daniel Golden's solution:

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 5

<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>

Answer 6

Using get(0) also works

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