VideoJS：コントロールを表示し続ける

Question

私はvideoJSが好きですが、コントロールバーを常に表示する（再生時にフェードアウトしない）方法を見つけることができません。 私はそれについての情報を検索し、それらが機能をオーバーライドするためのアドバイスが、このような隠蔽a topic about it、実測値：FN/

隠蔽=関数（）{/ *自動非表示

/オーバーライド制御を何も* /};

ただし、ここでは機能しないため、古くなっている可能性があります。 （バージョン3.2.0）

これを達成する方法を知っている人はいますか？

ありがとうございます！

Answer 1

visibility:hiddenとopacity:0のルールは、video-js.cssの.vjs-fade-outと.vjs-default-skin .vjs-controlsクラスからアウト/削除してください。

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

Answer 2

ありがとうございます！

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

ありがとう：私は、元のファイルをハックする避けたかったように私は 、別の解決策を見つけ、 はこれを追加することは、私のCSSです！

Answer 3

私はこの問題が数年前であることを知っていますが、私もこれを行う必要があり、上記の答えはビデオの上部をコントロールしています。私は自分の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; 
} 

Answer 4

ここでは死霊術のちょうど1以上のビット...

ピーター・クリストファーことで、最後の答えは正常に動作しますが、別のオプションは、完全に無活動タイムアウトを無効にし、0にinactivityTimeoutを設定することです。

<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>