Hide video control until user directs video

Question

I try to hide the video controls on my video until the user hovers over the video, then the controls appear. Any idea or advice? Thank you And I have some videos.

HTML:

<div class="item spoon burger"><video width="300" height="auto" controls><source src="videos/sruthi.mp4" type="video/mp4"></video></div> 

Answer 1

We can accomplish this in a couple of jQuery lines using . hover () :

Working example

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

Edit I mistakenly left the video variable in the above code. I changed it to this so that you do not have to manage variables that capture the identifier.

 $('#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. This way you can use the same logic and just add extra selectors to $( ) . Here is an example:

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

Doing this will listen or wait until it detects that you are hovering over one of these identifiers.

Updated fiddle

Answer 2

One of the problems with @EnigmaRM's answer is that if jQuery somehow skips the hover event, the controls may switch to the "wrong" way - that is, they disappear when you enter the mouse and reappear when you leave the mouse.

Instead, we can ensure that controls always appear and disappear correctly with event.type :

 $("#myvideo").hover(function(event) { if(event.type === "mouseenter") { $(this).attr("controls", ""); } else if(event.type === "mouseleave") { $(this).removeAttr("controls"); } }); 

Answer 3

Unconfirmed, but I believe this will work. Instead of CSS JavaScript is used.

 <div class="item spoon burger"><video id="videoElement" width="300" height="auto"><source src="videos/sruthi.mp4" type="video/mp4"></video></div> <script type="text/javascript"> (function(window) { function setupVideo() { var v = document.getElementById('videoElement'); v.addEventListener('mouseover', function() { this.controls = true; }, false); v.addEventListener('mouseout', function() { this.controls = false; }, false); } window.addEventListener('load', setupVideo, false); })(window); </script> 

Answer 4

The previous article explained how to do this HTML5 video - programmatically show / hide controls

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

Check if your solution works for you! Please +1 them if so!