无法使用居中的大播放按钮暂停 VideoJS 播放器
Can't pause VideoJS player using centered big-play-button
我已将自定义 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);
}
为了扩展 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;
}
我已将自定义 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);
}
为了扩展 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;
}