13

私は videoJS が好きですが、コントロール バーを常に表示しておく方法が見つかりません (再生時にフェードアウトしません)。私はそれについての情報を検索し、それについてのトピックを見つけました。そこでは、関数 hide を次のようにオーバーライドするようアドバイスしています。

/コントロールをオーバーライドして自動非表示にする/

hide = function(){ /* 何もしない */ };

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

どうすればこれを達成できるか知っている人はいますか?

どうもありがとう ！

4

4 に答える 4

38

ここでネクロマンシーをもう 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>

于 2015-06-16T00:20:31.170 に答える
4

この質問は数年前のものであることは知っていますが、これも行う必要があり、上記の回答により、ビデオの上部にコントロールが表示されます。私自身の 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;
}
于 2014-10-02T08:48:25.050 に答える
3

ありがとう ！元のファイルをハッキングするのを避けたかったので、別の解決策を見つけました。これを追加すると、私の CSS です。

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

ありがとう ！

于 2012-11-15T11:09:10.497 に答える
2

video-js.cssのandクラスからvisibility:hiddenandopacity:0ルールをコメントアウト/削除します。.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*/
}
于 2012-11-14T18:12:13.840 に答える