Html5 Video // Completely Hide Controls

HTML5 Video // Completely Hide Controls

Like this:

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

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.

HTML5 video - show/hide controls programmatically

<video id="myvideo">
  <source src="path/to/movie.mp4" />
</video>

<p onclick="toggleControls();">Toggle</p>

<script>
var video = document.getElementById("myvideo");

function toggleControls() {
  if (video.hasAttribute("controls")) {
     video.removeAttribute("controls")   
  } else {
     video.setAttribute("controls","controls")   
  }
}
</script>

See it working on jsFiddle: http://jsfiddle.net/dgLds/

How to remove HTML5 video player navigation button

You can disabled controls via Javascript:

document.getElementById('video-player').controls = false

Or simply remove controls attribute:

<video id='video-player' autoplay="autoplay" loop preload="metadata">
    <source src="Video/1.MP4" type="video/mp4">
</video>

Hide Video Controls Until User Hover Over Video

We can accomplish this through just a couple lines of jQuery, making use of .hover():

Working Example

$('#myvideo').hover(function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls", "controls")
}
})

Edit I mistakenly left the variable video in the code above. I changed it to this so that you won't have to manage variables that grab an ID.

$('#myvideo').hover(function toggleControls() {
    if (this.hasAttribute("controls")) {
        this.removeAttribute("controls")
    } else {
        this.setAttribute("controls", "controls")
    }
})

HTML

<video width="300" height="auto" id="myvideo">
    <source src="#" type="video/mp4" />
</video>

---

Update:
You mentioned that you have several videos. So you can use this same logic, and just add additional selectors into $( ). Here's an example:

$('#yourID1, #yourID2, #yourID3').hover(function toggleControls() { ...

Doing that will listen or wait until it detects that you're hovering over one of those IDs.

Updated fiddle

How can we hide play,timeline control from Video tag

To show video controls:

<video width="320" height="240" controls>

To hide video controls:

<video width="320" height="240">

Supported from IE 9 and up.

html how to remove control bar in video tag inside iframe

hi just check your video code if there is any

controls

word like that

<video src="../videos/test.mp4" autoplay controls></video>

then remove it to be like that

<video src="../videos/test.mp4" autoplay ></video>

---

Related Topics