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
57
<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
3
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
2
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
57
<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
3
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
2
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