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

【问题标题】：HTML5 video - show/hide controls programmaticallyHTML5 视频 - 以编程方式显示/隐藏控件
【发布时间】：2011-07-20 22:36:49
【问题描述】：

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

有没有办法用原生视频控件做到这一点？

我使用的是谷歌浏览器。

【问题讨论】：

删除控件会将音频隐藏在一起，因此您需要添加 autoplay 属性或以编程方式播放音频。

标签： javascript google-chrome html5-video

【解决方案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/

【讨论】：

关于如何在全屏模式下实现此行为的任何想法？

【解决方案2】：

这是怎么做的：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：