Постоянно проверяйте, когда добавлен класс CSS

Question

Я пытаюсь отобразить элемент, когда видео приостановлено. Я использую video.js, и в настоящее время классы добавляются, если видео воспроизводится, приостановлено, завершено и т. Д.

Что я не могу сделать, это проверить с помощью .hasClass() и отобразить элемент. До сих пор я использую это:

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

    } 

Я думаю, мне нужно, чтобы проверить все изменения постоянно, но я не знаю, как это сделать.

Я также видел плагин под названием watch, но не знаю, как его использовать.

Это codepen:

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

Answer 1

Похоже, .video-js не является правильным элементом для прослушивания.

Вы можете использовать videojs API:

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

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

См CodePen

Или слушать события объекта видео с помощью JQuery:

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

Answer 2

Вам не нужно делать постоянно, что снижает производительность браузера. video элемент имеет события, которые могут быть Слушали:

$('.video-js').on('pause play', function() { 
    if ($(this).hasClass('vjs-paused')) { 
    $('.wrapper').addClass('show'); 
    } else { 
    $('.wrapper').removeClass('show'); 
    } 
});