CODEWITHSUNDEEP
jqueryhtmlvideo
Andrew
Andrew

Reputation: 1277

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

Upvotes: 40

Views: 103757

Answers (8)

Saadawy
Saadawy

Reputation: 1

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

Upvotes: 0

William Frazier
William Frazier

Reputation: 11

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

Upvotes: 1

ios-lizard
ios-lizard

Reputation: 834

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

Upvotes: 19

mdf
mdf

Reputation: 1

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

Upvotes: -3

Jry
Jry

Reputation: 127

Using get(0) also works 

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

Upvotes: 0

emags
emags

Reputation: 731

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

Upvotes: 72

deepwell
deepwell

Reputation: 20871

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/

Upvotes: 4

tiagoboldt
tiagoboldt

Reputation: 2426

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

Upvotes: 6

Related Questions