javascript - 无法使用居中的大播放按钮暂停 VideoJS 播放器

Question

我已将自定义 VideoJS 播放器中的 .vjs-big-play-button 更改为覆盖整个视频区域的 100% 宽度和高度半透明覆盖层。我还希望它在您播放和暂停视频时淡入和淡出。

它可以工作，但现在单击视频区域不再暂停视频。要暂停视频，我必须单击控制栏中的小播放暂停按钮。

VideoJS 在 .vjs-big-play-button 上使用 display: none ，将其删除，但无法在 css 中进行动画处理。有没有办法让大播放按钮淡入淡出并保留功能？

这可以工作，但没有动画:

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

它有动画，但暂停已损坏

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

要扩展 David Mulder 的评论，请删除 pointer events单击按钮后，您允许所有后续点击通过并注册到视频本身。

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