HTML5 视频 // 完全隐藏控件答案

【问题标题】：HTML5 Video // Completely Hide ControlsHTML5 视频 // 完全隐藏控件
【发布时间】：2013-01-04 17:05:30
【问题描述】：

我怎样才能完全隐藏 HTML5 视频控件？

<video width="300" height="200" controls="false" autoplay="autoplay">
<source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>

false 不起作用——这是怎么做到的？

干杯。

【问题讨论】：

标签： html video

【解决方案1】：

像这样：

<video width="300" height="200" autoplay="autoplay">
  <source src="video/supercoolvideo.mp4" type="video/mp4" />
</video>

controls 是boolean attribute：

注意：布尔值不允许使用值“true”和“false” 属性。要表示假值，属性必须是完全省略。

【讨论】：

所以从技术上讲这是可行的；我猜，就是答案。尽管;删除 HTML5 视频标记中的“控件”，会杀死 iPad 上的视频；所以我需要另一个解决方案。
@1977 This question is probably relevant
您可以尝试加载包含控件属性的标签，并在页面加载后使用一些 javascript 将其删除： var video = document.getElementById('myvideo'); video.control = false;
The values "true" and "false" are not allowed on boolean attributes。谈论混乱。
'true' 和 'false' 在布尔属性上是允许的，但是这两者以及任何其他属性都等同于 'true'。属性的存在决定了它的布尔值，而不是分配给它的值。

【解决方案2】：

您可以使用 CSS 伪选择器来隐藏控件，例如演示：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>

【讨论】：

这适用于 Chrome，但不适用于 Firefox。你们有跨浏览器的解决方案吗？
需要用 CSS 或 JavaScript 删除它们，因为我正在一起破解一些东西，无法直接编辑视频标签代码
嘿，Benny 为 Mozilla。您需要为所有这些添加供应商前缀 css，例如 "-moz-media-controls-play-button" 。谢谢
尝试添加前缀，但没有奏效。这是更新后的JSfiddle，这是我使用的 CSS video::-webkit-media-controls, video::-moz-media-controls, video::-o-media-controls, video::-ms-media-controls { display: none !important; }
是否可以动态显示/隐藏这些单独的控件。例如：apply css video::-webkit-media-controls-current-time-display {display: none;} 最初隐藏当前时间控件，但是当视频播放时，通过更新css类显示当前时间控件video::-webkit-media-controls-current-time-display {/*显示：无；*/}。或应用显示当前时间的不同 css 类。谢谢。

【解决方案3】：

一个简单的解决方案是——忽略用户交互:-)

video {
  pointer-events: none;
}

【讨论】：

除了控件在初始加载时显示之外，此方法有效。

【解决方案4】：

首先，移除视频的“控件”属性。
对于 iOS，我们可以通过添加以下 CSS 伪选择器来隐藏视频的内置播放按钮：

video::-webkit-media-controls-start-playback-button {
    display: none;
}

【讨论】：

【解决方案5】：

有两种方法可以隐藏视频标签控件

从视频标签中移除controls 属性。

将css添加到video标签

video::-webkit-media-controls-panel {
display: none !important;
opacity: 1 !important;}

【讨论】：

太棒了，感谢您的解决方案！
这仅适用于 Chrome 浏览器，我希望所有浏览器都使用此功能。

【解决方案6】：

<video width="320" height="240" autoplay="autoplay">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

【讨论】：

我同意。最简单的解决方案是永远不要将属性放在开头。

【解决方案7】：

这种方法在我的情况下有效。

video=getElementsByTagName('video');
function removeControls(video){
  video.removeAttribute('controls');
}
window.onload=removeControls(video);

【讨论】：

【解决方案8】：

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

【讨论】：