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

I am looking for a way to show or hide HTML5 video controls at will via javascript. The controls are currently only visible when the video starts to play

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

Is there a way to do this with the native video controls?

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

I'm using google chrome browser.

我正在使用谷歌浏览器。

3 个解决方案

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

See it working on jsFiddle: http://jsfiddle.net/dgLds/

看到它在jsFiddle工作：http：//jsfiddle.net/dgLds/

#2

CARL LANGE also showed how to get hidden, autoplaying audio in html5 on a iOS device. Works for me.

CARL LANGE还展示了如何在iOS设备上以html5隐藏，自动播放音频。适合我。

In HTML,

在HTML中，

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

with JS

用JS

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

In CSS,

在CSS中，

#hideme {display: none;}

#3

Here's how to do it:

这是怎么做的：

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

Working example: https://jsfiddle.net/otnfccgu/2/

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

See all available properties, methods and events here: https://www.w3schools.com/TAGs/ref_av_dom.asp

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

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