Überprüfen Sie ständig, wenn eine CSS-Klasse hinzugefügt wird

Question

Ich versuche, ein Element anzuzeigen, wenn ein Video pausiert ist. Ich benutze video.js, und derzeit werden Klassen hinzugefügt, wenn das Video abgespielt, pausiert, beendet usw.

Was ich nicht tun kann, ist mit .hasClass() zu überprüfen und das Element anzuzeigen. Bisher bin ich mit dieser:

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

    } 

Ich denke, ich brauche alle Änderungen ständig zu überprüfen, aber ich weiß nicht wirklich, wie es geht.

Ich habe auch ein Plugin namens Uhr gesehen, aber nicht sicher, wie man es benutzt.

Dies ist ein codepen:

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

Answer 1

Es ist wie .video-js scheint nicht das richtige Element zu hören für.

können Sie die VideoJS API verwenden:

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

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

CodePen

See oder auf Ereignisse des Videoobjekts hören jQuery:

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

Answer 2

Sie brauchen nicht ständig zu tun, die die Leistung des Browsers reduziert. Das video Element Ereignisse, die angehört werden können:

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