Html HTML5 视频 // 完全隐藏控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14161516/
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 // Completely Hide Controls
提问by doc holiday
How Could I completely hide HTML5 video controls?
如何完全隐藏 HTML5 视频控件？
<video width="300" height="200" controls="false" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>
false didn't work -- how is this done?
false 不起作用——这是怎么做的？
Cheers.
干杯。
回答by robertc
Like this:
像这样：
<video width="300" height="200" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>
controlsis a boolean attribute:
controls是一个布尔属性：
Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.
注意：布尔属性不允许使用值“true”和“false”。要表示假值，必须完全省略该属性。
回答by AbidCharlotte49er
You could hide controls using CSS Pseudo Selectors like Demo: https://jsfiddle.net/g1rsasa3
您可以使用 CSS 伪选择器来隐藏控件，例如 Demo：https: //jsfiddle.net/g1rsasa3
//For Firefox we have to handle it in JavaScript
var vids = $("video");
$.each(vids, function(){
this.controls = false;
});
//Loop though all Video tags and set Controls as false
$("video").click(function() {
//console.log(this);
if (this.paused) {
this.play();
} else {
this.pause();
}
});video::-webkit-media-controls {
display: none;
}
/* Could Use thise as well for Individual Controls */
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->
<video width="800" autoplay controls="false">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>回答by Jakob E
A simple solution is – just to ignore user interactions :-)
一个简单的解决方案是——只是忽略用户交互:-)
video {
pointer-events: none;
}
回答by Alan
First of all, remove video's "controls" attribute.
For iOS, we could hide video's buildin play button by adding the following CSS pseudo selector:
首先，删除视频的“控件”属性。
对于 iOS，我们可以通过添加以下 CSS 伪选择器来隐藏视频的内置播放按钮：
video::-webkit-media-controls-start-playback-button {
display: none;
}
回答by Richy Zuo
This method worked in my case.
这种方法在我的情况下有效。
video=getElementsByTagName('video');
function removeControls(video){
video.removeAttribute('controls');
}
window.onload=removeControls(video);
回答by user6884687
document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);
function initialiseMediaPlayer() {
mediaPlayer = document.getElementById('media-video');
mediaPlayer.controls = false;
mediaPlayer.addEventListener('volumechange', function(e) {
// Update the button to be mute/unmute
if (mediaPlayer.muted) changeButtonType(muteBtn, 'unmute');
else changeButtonType(muteBtn, 'mute');
}, false);
mediaPlayer.addEventListener('ended', function() { this.pause(); }, false);
}
