我喜歡videoJS,但無法找到一種方法來保持控件欄始終可見(播放時不會淡出)。 我搜索了有關信息,發現a topic about it,在那裏他們的意見重寫功能隱瞞這樣的:VideoJS:保持控件可見
/覆蓋控制自動隱藏FN/
隱藏=函數(){/ *沒有 */ };
但是這可能已經過時,因爲它在這裏不起作用。 (版本3.2.0)
有誰知道我怎麼能做到這一點?
非常感謝!
我喜歡videoJS,但無法找到一種方法來保持控件欄始終可見(播放時不會淡出)。 我搜索了有關信息,發現a topic about it,在那裏他們的意見重寫功能隱瞞這樣的:VideoJS:保持控件可見
/覆蓋控制自動隱藏FN/
隱藏=函數(){/ *沒有 */ };
但是這可能已經過時,因爲它在這裏不起作用。 (版本3.2.0)
有誰知道我怎麼能做到這一點?
非常感謝!
評論/刪除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*/
}
謝謝!我找到了另一種解決方案,如 我想避免破解的原始文件, 添加這是我的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;
}
這似乎是最好的辦法,但我認爲唯一的線實際上需要的是不透明:1!重要;'和'知名度:可見!重要;',對吧? – dfrdmn
「底部」規則將控件放在視頻下方而不是頂部,「顯示」可以克服可能的「無顯示:無」。 –
巫術這裏再多一次有點...
雖然由彼得·基茨最後答案將正常工作,另一種選擇是設置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>
我不喜歡,我們不得不這樣做擺在首位,但感謝的解決辦法;) – danjah