Kann nicht VideoJS Spieler mit zentrierte Big-Play-Taste

Question

Pause ich die .vjs-big-play-button in meinem maßgeschneiderten VideoJS Spieler geändert habe eine 100% Breite und Höhe halbtransparente Overlay zu sein, den gesamten Videobereich abdeckt. Ich möchte auch, dass es ein- und ausgeblendet wird, wenn Sie das Video abspielen und pausieren.

Es funktioniert, aber jetzt im Videobereich klicken nicht länger pausiert das Video. Um das Video anzuhalten, muss ich auf die kleine Pause-Taste in der Kontrollleiste klicken.

VideoJS verwendet display: none auf .vjs-big-play-button, die es entfernt, aber es kann in CSS nicht animiert werden. Gibt es eine Möglichkeit, den großen Play-Button ein- und auszublenden und die Funktionalität beizubehalten?

Dies funktioniert, hat aber keine Animation:

// Hide if the video is playing 
.vjs-has-started .vjs-big-play-button { 
    display: none; 
} 

// Show if the video is paused 
.vjs-paused .vjs-big-play-button { 
    display: block; 
} 

Diese Animation hat aber Pause unterbrochen wird

// Hide if the video is playing 
.vjs-has-started .vjs-big-play-button { 
    opacity: 0; 
    @include transition(all 0.5s); 
} 

// Show if the video is paused 
.vjs-paused .vjs-big-play-button { 
    opacity: 1; 
    @include transition(all 0.5s); 
} 

Answer 1

auf Kommentar David Mulder zu erweitern, durch pointer events von der Taste entfernt wird, nachdem es gewesen ist angeklickt, Du lässt zu, dass alle folgenden Klicks durchgehen und sich im Video selbst registrieren.

// Hide if the video is playing 
.vjs-has-started .vjs-big-play-button { 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.5s; 
} 

// Show if the video is paused 
.vjs-paused .vjs-big-play-button { 
    opacity: 1; 
    pointer-events: all; 
    transition: opacity 0.5s; 
}