HTML5 Video // Ẩn hoàn toàn các điều khiển

Làm cách nào để ẩn hoàn toàn các điều khiển video HTML5?

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

false không hoạt động - điều này được thực hiện như thế nào?

Chúc mừng.

Như thế này:

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

controlslà một thuộc tính boolean :

Lưu ý: Các giá trị "true" và "false" không được phép trên các thuộc tính boolean. Để thể hiện một giá trị sai, thuộc tính phải được bỏ qua hoàn toàn.

Bạn có thể ẩn các điều khiển bằng cách sử dụng CSS Pseudo Selectors như 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>

Một giải pháp đơn giản là - chỉ cần bỏ qua các tương tác của người dùng :-)

video {
  pointer-events: none;
}

Trước hết, hãy xóa thuộc tính "điều khiển" của video.
Đối với iOS, chúng tôi có thể ẩn nút phát bản dựng của video bằng cách thêm bộ chọn giả CSS sau:

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

Phương pháp này đã hoạt động trong trường hợp của tôi.

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

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

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