HTML5 视频 // 完全隐藏控件

Question

如何才能完全隐藏 HTML5 视频控件？

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

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

干杯。

Answer 1

像这样：

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

controls

是一个 布尔属性:

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

Answer 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>

Answer 3

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

video {
  pointer-events: none;
}

Answer 4

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

1. 从视频标签中删除

   controls

   属性。

2. 将css添加到视频标签

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

Answer 5

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

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

Answer 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>

Answer 7

这个方法对我来说很有效。

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

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

Answer 9

您只需将“playsinline”作为属性即可。如果您设置 constrols="false" ，您可能仍然会在移动设备中获得控件，并且如果您希望视频自动播放，请记住也设置“静音”。

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