首页 文章

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

提问于
浏览 次
2

我已将我自定义的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);
}
javascript css video.js

1 回答

  • 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;
}
    回复于

相关问题