Search code examples
htmlvideoclickmp4playback

Play HTML video on click

I have a pretty simple situation. I have an HTML video that I have play when I click a div that has class ".play"

$('.play').click(function() {
    $('.video').get(0).paused ? $('.video').get(0).play() : $('.video').get(0).pause();
    $(this).fadeOut(100);
});

My question is, how can I fade the play button back in after the 6 second video has finished. The play button is absolutely positioned on top of the video, so it needs to fadeout while playing, but reappear after the short video has finished, so the user can click it again and watch the video play once more if they wish.

Solution

  • Quite a simple solution with jQuery

    $(document).ready(function() {
    $('.video').on('ended', function(){
        // Do anything that needs to happen when the video is done
        $('.play').fadeIn(100);
    });
});