Is there a way to prevent the control bar of a video defined by the <video> tag in HTML from automatically showing every time it's loaded in the current window? I want the control bar to only appear when I hover over the video. Any simple solutions?
For example, if you save the code to an HTML file and open it in a browser or switch to its tab from other tabs, the video control bar will automatically appear and disappear once.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="with=device-with initial-scale=1.0">
<style>
.video_preview::-webkit-media-controls-mute-button {
display: none;
}
.video_preview::-webkit-media-controls-volume-slider {
display: none;
}
.video_preview::-webkit-media-controls-current-time-display{
display: none;
}
.video_preview::-webkit-media-controls-time-remaining-display {
display: none;
}
</style>
<script>
$('#myvideo').hover(function toggleControls() {
if (this.hasAttribute("controls")) {
this.removeAttribute("controls")
} else {
this.setAttribute("controls", "controls")
}
})
</script>
</head>
<body>
<div>
<video id="myvideo" class="ha video_preview" width="20%" height="20%" muted="" autoplay="" loop="" controls="" controlslist="nodownload noremoteplayback noplaybackrate foobar" disablepictureinpicture="" src="http://www.computationalimaging.org/wp-content/uploads/2020/08/neuralholography_citl_holographic_display.mp4">Your browser does not support the video tag.</video>
</div>
</body>
</html>
I want the video to behave like a gif image, showing its control bar only when hovered over.
I attempted a solution found on (adding the script to the <head> as indicated in the above code), but it didn't work in Chrome/Edge.