CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
vamsi
vamsi

Reputation: 1586

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

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

Upvotes: 4

Views: 14977

Answers (3)

1Bladesforhire
1Bladesforhire

Reputation: 360

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/

Upvotes: 1

akmozo
akmozo

Reputation: 9839

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.

Upvotes: 8

supereater14
supereater14

Reputation: 147

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.

Upvotes: 1

Related Questions