Hướng dẫn hide control video html5

How Could I completely hide HTML5 video controls?

false didn't work -- how is this done?

Cheers.

asked Jan 4, 2013 at 17:05

Fred RandallFred Randall

7,64923 gold badges85 silver badges192 bronze badges

Like this:

controls is a boolean attribute:

Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

andreas

15.7k12 gold badges71 silver badges70 bronze badges

answered Jan 4, 2013 at 17:08

9

You could hide controls using CSS Pseudo Selectors like Demo: //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 {}

answered Mar 29, 2016 at 19:10

11

A simple solution is – just to ignore user interactions :-]

video {
  pointer-events: none;
}

answered Aug 21, 2017 at 9:53

Jakob EJakob E

3,7701 gold badge17 silver badges17 bronze badges

1

There are two ways to hide video tag controls

1. Remove the controls attribute from the video tag.

2. Add the css to the video tag

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

answered Feb 23, 2021 at 5:28

2

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:

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

answered Jun 20, 2017 at 3:41

AlanAlan

1512 silver badges6 bronze badges

  
  
  Your browser does not support the video tag.

answered Jun 27, 2020 at 6:58

1

This method worked in my case.

video=getElementsByTagName['video'];
function removeControls[video]{
  video.removeAttribute['controls'];
}
window.onload=removeControls[video];

answered Mar 17, 2017 at 13:13

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

answered Sep 26, 2016 at 21:43

1