javascript - Detect if HTML5 video is playing or paused and show or hide a Div accordingly - Stack Overflow

I have a html5 video which is background of my website, and on that video i am placing some text like Wele 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...

I have a html5 video which is background of my website, and on that video i am placing some text like Wele 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...

• javascript
• jquery
• html
• video

Share Improve this question Follow edited Feb 23, 2015 at 22:11 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Feb 23, 2015 at 16:40 vamsivamsi 1,58633 gold badges3737 silver badges6969 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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.

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.

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