web-dev-qa-db-ja.com

HTML5ビデオ-プログラムによるコントロールの表示/非表示

JavaScriptを介してHTML5ビデオコントロールを自由に表示または非表示にする方法を探しています。現在、コントロールは、ビデオの再生開始時にのみ表示されます

ネイティブのビデオコントロールでこれを行う方法はありますか？

Google chrome browser。

javascriptgoogle-chromehtml5-video
44
Weatherman
<video id="myvideo">
  <source src="path/to/movie.mp4" />
</video>

<p onclick="toggleControls();">Toggle</p>

<script>
var video = document.getElementById("myvideo");

function toggleControls() {
  if (video.hasAttribute("controls")) {
     video.removeAttribute("controls")   
  } else {
     video.setAttribute("controls","controls")   
  }
}
</script>

JsFiddleで動作する様子をご覧ください： http://jsfiddle.net/dgLds/

60
jessegavin

方法は次のとおりです。

var myVideo = document.getElementById("my-video")    
myVideo.controls = false;

作業例： https://jsfiddle.net/otnfccgu/2/

利用可能なすべてのプロパティ、メソッド、イベントはこちらをご覧ください： https://www.w3schools.com/TAGs/ref_av_dom.asp

5
Jakob Sternberg

CARL LANGE は、iOSデバイスでhtml5のオーディオを非表示にして自動再生する方法も示しました。私のために働く。

HTMLでは、

<div id="hideme">
    <audio id="audioTag" controls>
        <source src="/path/to/audio.mp3">
    </audio>
</div>

jSで

<script type="text/javascript">
window.onload = function() {
    var audioEl = document.getElementById("audioTag");
    audioEl.load();
    audioEl.play();
};
</script>

CSSでは、

#hideme {display: none;}
3
foool