Click The Poster Image The Html5 Video Plays?

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 f

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

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

Solution 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 (typeofInstallTrigger === 'undefined') {

        // get click position var clickY = (e.pageY - $(this).offset().top);
        var height = parseFloat( $(this).height() );

        // avoids interference with controlsif (clickY > 0.82*height) return;

        // toggles play / pausethis.paused ? this.play() : this.pause();
    }
});

Solution 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

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

Solution 5:

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

constVideo = ({videoSources, poster}) => {
  return (
    <videocontrolsposter={poster}onClick={({target:video}) => video.paused ? video.play() : video.pause()}
    >
      {_.map(videoSources, ({url, type}, i) =>
        <sourcekey={i}src={url}type={type} />
      )}
    </video>
  )
}