不断检查何时添加CSS类

我试图在视频暂停时显示元素。我使用video.js，目前，如果视频播放，暂停，完成等，则添加类。不断检查何时添加CSS类

我不能做的是检查使用.hasClass（）并显示元素。到目前为止，我使用的是这样的：

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

    }

我想我需要不断地检查任何变化，但我真的不知道该怎么做。

我也看到一个名为watch的插件，但不知道如何使用它。

这是一个codepen：

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

来源

2016-07-25 Florin Simion

好像.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); 
    }); 
});

来源

2016-07-25 13:55:57

感谢您的答案，但它似乎并没有工作。 –

答案中的笔确实可以在Firefox和Chrome上使用（但只能在广告期间使用，我认为这很正常） –

适用于Firefox，但不适用于Chrome。 –

你并不需要经常做的，这降低了浏览器的性能。该video元素具有可听了事件：

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

来源

2016-07-25 13:40:48

谢谢你的答案...我有更新我的笔，但仍然无法正常工作。 –

不断检查何时添加CSS类

回答

相关问题