web-dev-qa-db-ja.com

HTML5ビデオコントロールを非表示にする（削除しない）

Everyquestiononthe サブジェクトはremoveHTML5ビデオ要素のコントロール。

videoElement.removeAttribute('controls');

しかし、ブラウザ、FirefoxとChromeには、hidingコントロールを非表示にする方法がありますカーソルは移動せず、ビデオが再生されています。また、カーソルを動かしたり、ビデオの再生が停止したりすると、再び表示されます。

<video controls><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

ビデオテストファイル： http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4

上記のビデオを再生し、カーソルを動かさずにそのままにしておくと、コントロールが消えます。もう一度カーソルを動かすと、再び表示されます。また、一時停止やビデオの終了時にも表示されます。

人気の高いネイティブまたはデスクトップビデオプレーヤーによく似ています。

これが私が欲しいものです。ビデオの再生中にカーソルがしばらく動かされなかった場合に自動的に非表示にするのと同じ方法で、コントロールを非表示にしたいと思います。

コントロールを完全に削除せずにこれを達成する方法はありますか？

javascripthtmlvideo
9
laggingreflex

これを試してください：

$("#myvideo").hover(function() {
  $(this).prop("controls", true);
}, function() {
  $(this).prop("controls", false);

});

// if always hide

$("#myvideo2").click(function() {
 if( this.paused)
   this.play();
  else
    this.pause();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<video id="myvideo" width="200"   >
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>
<br/>All time hide controls:<br/>
<video id="myvideo2" autoplay  width="200" >
  <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
</video>
8
Ahosan Karim Asik

ビデオの上にdivを置き、それを非表示/表示します。あなたは自分の質問に答えました。

ビデオが再生されていて、カーソルがしばらく動かされなかった場合にコントロールが自動的に非表示になるのと同じ方法で、コントロールを非表示にしたいと思います。

これも見てください。

スタイリングHTML5ビデオコントロール

1
Javi Qualms Pdog

私はvideojs.comライブラリを使用しており、解決策は追加することでした

.vjs-control-bar {
    display:none !important;
}

スタイルシートに。

0
maaw