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 will fire the play event and start the video? I feel like this is fairly standard practice, but I can not find a way to do this without flash. Any help would be much appreciated.

Answer 1

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 2

Posted this here too but this applies to this thread too.

I had countless issues doing this but finally came up with a solution that works.

Basically the code below is adding a click handler to the video but ignoring all the clicks on the lower part (0.82 is arbitrary but seems to work on all sizes).

$("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 3

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 4

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 5

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 6

Using get(0) also works

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

Answer 7

You can do it without using jQuery or anything. Just plain old JavaScript:

1. Create a variable to store the video element.
2. Detect the event (you can use any button you like).
3. I detected the left mouse button in my example.
4. The final line will toggle play and pause.

var video = document.getElementById('yourVideoId');
    document.onmousedown = function(e) {
    if (event.button == 0){
        video.paused ? video.play() : video.pause();
    }
}

Answer 8

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