不斷檢查何時添加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類

回答

相關問題