VideoJS oynatıcısını ortalanmış büyük oynatma düğmesini kullanarak duraklatılamıyor

Question

Özelleştirilmiş VideoJS oynatıcımdaki .vjs-big-play-button'u tüm video alanını kapsayan% 100 genişlik ve yükseklikte yarı saydam kaplama olarak değiştirdim. Videoyu oynatıp duraklattığınızda da içeri girip çıkmasını isterim.

Çalışıyor, ancak video alanında tıklamak artık videoyu duraklatmıyor. Videoyu duraklatmak için kontrol çubuğundaki küçük oynatma duraklat düğmesine basmalıyım.

VideoJS, .vjs-big-play-button numaralı telefondan display: none numaralı telefonu kullanıyor ve bunu kaldırıyor ancak css dosyasında canlandırılamadı. Büyük oyun düğmesinin içeri ve dışarı solmasına ve işlevselliğini korumanın bir yolu var mı?

Bu işler ancak hiçbir animasyon vardır:

// 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; 
} 

Bu animasyon var ama duraklama tıklandığında geçirildikten sonra düğmeden pointer events kaldırarak, David Mulder'ın yorumum genişletmek için

// 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

bozuldu, Aşağıdaki tüm tıklamaların videonun kendisinden geçmesine ve kaydolmasına izin verirsiniz.

// 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; 
}