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 played, but when user clicks on play button the video will start playing, here I want to fadeOut the text which am showing on that video.

When user clicks on pause the text should be displayed, when clicks on play it should be fadeout. This is story :-)

I found below things

$("#player").get(0).paused
$("#player").get(0).play()
$("#player").get(0).pause()

But didn't found

$("#player").get(0).played

How to detect if my video is playing or paused? I need something like below

if(video == "playing"){
  $("#introText").fadeOut();
else {$("#introText").fadeIn();}
}

Thanks in adv...

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 :

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