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

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 :

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.