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

时间:2016-03-27 16:19:47

标签: javascript css video.js

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

虽然有效,但现在点击视频区域不再会暂停视频。要暂停视频,我必须单击控制栏中的小播放暂停按钮。

VideoJS正在display: none使用.vjs-big-play-button删除它,但无法在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);
}

1 个答案:

答案 0 :(得分: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;
}