HTML5视频 - 以编程方式显示/隐藏控件

Question

我正在寻找一种通过javascript随意显示或隐藏HTML5视频控件的方法.控件目前仅在视频开始播放时可见

有没有办法使用原生视频控件？

我正在使用谷歌浏览器.

Answer 1

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

Answer 2

方法如下：

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

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

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