Can't get "If paused" to work in videojs

Question

I'm trying to show an overlay on my video when the video is paused. Now from the docs I took:

var isPaused = myPlayer.paused();
var isPlaying = !myPlayer.paused();

And implemented it as follows:

var isPaused = myPlayer.paused();
if (isPaused == true) {
$("#social_share").fadeIn(1500);
}

var isPlaying = !myPlayer.paused();
if (isPlaying == true) {
$("#social_share").fadeOut(1500); 
}

Unfortunately this did not work, and I can't find why. Any thoughts are highly apricaited!

(PS: It shows on initial start which would be logical since the player is paused at that time. Any idea's on how to could be prevented would also be more then welcome.)

Thanks!

Answer 1

You're looking for events. Specifically, the pause and play events.

Try:

myPlayer.on("pause", function () {
    $("#social_share").fadeIn(1500);
});

myPlayer.on("play", function () {
    $("#social_share").fadeOut(1500);
});

Reference:

• https://github.com/videojs/video.js/blob/master/docs/api.md#events