Javascript VideoJS:保持控件可见
我喜欢videoJS,但找不到一种方法使控制栏始终可见(播放时不褪色)。 我搜索了相关信息,发现他们建议覆盖函数隐藏,如下所示: /覆盖控件自动隐藏fn/ 隐藏=函数(){/*无*/} 但这可能已经过时了,因为它在这里不起作用。(3.2.0版) 有人知道我是如何做到这一点的吗Javascript VideoJS:保持控件可见,javascript,html,video.js,Javascript,Html,Video.js,我喜欢videoJS,但找不到一种方法使控制栏始终可见(播放时不褪色)。 我搜索了相关信息,发现他们建议覆盖函数隐藏,如下所示: /覆盖控件自动隐藏fn/ 隐藏=函数(){/*无*/} 但这可能已经过时了,因为它在这里不起作用。(3.2.0版) 有人知道我是如何做到这一点的吗 非常感谢 从.vjs淡出和.vjs默认皮肤中注释/删除可见性:隐藏和不透明度:0规则。vjs控制video-js.css中的类 .vjs-fade-out { /*visibility: hidden!import
非常感谢 从
.vjs淡出
和.vjs默认皮肤中注释/删除可见性:隐藏
和不透明度:0
规则。vjs控制video-js.css中的类
.vjs-fade-out {
/*visibility: hidden!important;
opacity: 0!important;*/
-webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
-o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
transition: visibility 0s linear 1.5s,opacity 1.5s linear
}
.vjs-default-skin .vjs-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
height: 2.6em;
color: #fff;
border-top: 1px solid #404040;
background: #242424;
background: -moz-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);
background: -webkit-gradient(linear,0% 0,0% 100%,color-stop(50%,#242424),color-stop(50%,#1f1f1f),color-stop(100%,#171717));
background: -webkit-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);
background: -o-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);
background: -ms-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);
background: linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);
/*visibility: hidden;
opacity: 0*/
}
谢谢!我找到了另一个解决办法,
因为我想避免破坏原始文件,
添加这是我的CSS:
.vjs-fade-in,.vjs-fade-out {
visibility: visible !important;
opacity: 1 !important;
transition-duration: 0s!important;
}
谢谢 我知道这个问题已经问了好几年了,但我也需要这样做,上面的答案将控制放在视频的顶部。我在自己的CSS文件中使用了以下CSS来覆盖videoJS样式,以在视频开始播放后保持控件可见,并将它们保持在视频下方
.vjs-default-skin.vjs-has-started .vjs-control-bar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
bottom: -3.4em !important;
background-color: rgba(7, 20, 30, 1) !important;
}
这里还有一点巫术
虽然Peter Kitts的最后一个答案很好,但另一个选项是将inactivityTimeout
设置为0,这将完全禁用非活动超时
我不喜欢我们首先必须这样做,但感谢您的解决方案;)这似乎是最好的方法,但我认为真正需要的行是opacity:1!重要的代码>和可见性:可见!重要的代码>,对吗?“底部”规则将控件保持在视频的下方而不是上方,而“显示”则克服了可能的“显示:无”。我认为您的方法是最好的,使用videojs的一个功能使控件保持可见。在我看来,CSS更像是一种解决方法。有没有一种方法可以在播放器启动前显示控件?很好的解决方案,只是为了提供一些信息,我使用了设置函数:videojs(“example_video_1”,{inactivityTimeout:0});