Detect if HTML5 video is playing or paused and show or hide a Div accordingly

Question

I have a html5 video which is background of my website, and on that video i am placing some text like Welcome to blah blah blah.....

Initially the video will not be

Answer 1

Why not just trigger the event on the play button click?

$("button").click(function(){
    $("#div1").fadeToggle();
})

That way you don't have to detect, simply toggle the text.

Reference : http://api.jquery.com/fadetoggle/

Answer 2

To detect if your video is playing or not, you can use playing (or play) and pause events and then you can show or hide your text :

HTML :

<video id="video">
    <!-- your videos -->
</video>

JS :

$(function(){

    var video = $('#video')[0];

    video.addEventListener('playing', function(){
           $('.text').fadeOut();
    })
     video.addEventListener('pause', function(){
           $('.text').fadeIn();
    })

})

You can of course use a var to indicate your video state ( playing or not ) and then use it in another part of your code not directly inside your events handlers.

You can see this code working here.

Hope that can help.

Answer 3

There is a "play" event, which fires when the video begins playing, and a "pause" event that fires when the video is paused.

Alternatively, the "paused" property will be false when the video is playing and true when it is not.