Florin Simion Florin Simion - 4 months ago 7
jQuery Question

Constantly check when a CSS class is added

I'm trying to display an element when a video is paused.
I'm using video.js, and currently, classes are added if the video is played, paused, finished etc.

What I can't do is to check using .hasClass() and display the element.
So far I'm using this:

if ($('.video-js').hasClass('vjs-paused')) {
$('.btn').addClass('show');}
else {
$('.btn').removeClass('show');

}


I guess I need to check any changes constantly but i don't really know how to do it.

I've also seen a plugin called watch but not sure how to use it.

This is a codepen:

https://codepen.io/florinsimion/pen/wWjxzA

Answer

It seems like .video-js is not the correct element to listen for.

You can use the videojs API:

player.on('pause', function () {
    $('.btn').addClass('show');
});

player.on('play', function () {
    $('.btn').removeClass('show');
});

See CodePen

Or listen to events of the video object using jQuery:

$(function() {
  $('video#content_video_html5_api').on('play pause', function() {
    $('.btn').toggleClass('show', $(this).get(0).paused);
  });
});
Comments