Click the poster image the HTML5 video plays?

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();"/>

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();
    }
});

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

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/