Javascript HTML5 视频 - 以编程方式显示/隐藏控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5399412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 video - show/hide controls programmatically
提问by Weatherman
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.
我正在使用谷歌浏览器。
回答by jessegavin
<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/
回答by Jakob Sternberg
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
回答by foool
CARL LANGEalso 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;}
