VideoJS：保持控件可见答案

【问题标题】：VideoJS : keep controls visibleVideoJS：保持控件可见
【发布时间】：2012-11-03 06:30:15
【问题描述】：

我喜欢 videoJS，但找不到让控制栏始终可见的方法（播放时不会淡出）。我搜索了相关信息并找到了a topic about it，他们建议像这样覆盖函数隐藏：

/覆盖控件自动隐藏 fn/

conceal = function(){ /* 什么都没有 */ };

但这可能已经过时了，因为它在这里不起作用。（版本 3.2.0）

有谁知道我如何做到这一点？

非常感谢！

【问题讨论】：

标签： javascript html video.js

【解决方案1】：

这里又多了一点死灵术......

虽然 Peter Kitts 的最后一个答案可以正常工作，但另一个选项是将 inactivityTimeout 设置为 0，这将完全禁用不活动超时。

<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{ "inactivityTimeout": 0 }'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>

【讨论】：

我认为你的方法是最好的，使用 videojs 功能之一保持控件可见。在我看来，CSS 更像是一种解决方法。
有没有办法在播放器启动前显示控件？
不错的解决方案，仅供参考，我使用 setup 函数完成了它：videojs("example_video_1", { inactivityTimeout : 0 } );

【解决方案2】：

我知道这个问题现在已经有几年了，但我也需要这样做，并且上面的答案使控件保持在视频的顶部。我在自己的 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;
}

【讨论】：

这似乎是最好的方法，但我认为实际需要的唯一行是opacity: 1 !important; 和visibility: visible !important;，对吧？
“底部”规则将控件保留在视频下方而不是顶部，并且“显示”克服了可能的“显示：无”。

【解决方案3】：

谢谢！我找到了另一个解决方案，因为我想避免破解原始文件，添加这是我的 CSS：

.vjs-fade-in,.vjs-fade-out {
visibility: visible !important;
opacity: 1 !important;
transition-duration: 0s!important;
}

谢谢！

【讨论】：

我不喜欢我们必须首先这样做，但感谢您的解决方法；）

【解决方案4】：

从 video-js.css 中的 .vjs-fade-out 和 .vjs-default-skin .vjs-controls 类中注释/删除 visibility:hidden 和 opacity:0 规则。

.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*/
}

【讨论】：