HTML5video – 以编程方式显示/隐藏控件

我正在寻找一种方法来通过javascript显示或隐藏HTML5video控件。 这些控件目前仅在video开始播放时才可见

有没有办法做到这一点本地video控制?

我正在使用谷歌Chrome浏览器。

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

CARL LANGE还展示了如何在iOS设备上以html5自动播放audio。 为我工作。

在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;} 

以下是如何做到这一点:

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

工作示例: https : //jsfiddle.net/otnfccgu/2/

查看所有可用的属性,方法和事件: https : //www.w3schools.com/TAGs/ref_av_dom.asp