how to avoid the automatically "appearing then disappearing" behavior of html video control bar?

Question

The video defined by the <video> tag in html will automatically show its control bar and then hide the bar after several seconds every time it's loaded in the current window. But I'd like to cancel the automatically showing behavior, and make the control bar only appear when I hover on it. Any simple solution?

Here is an example: save the code to a html file, and every time you open it in the 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 hope the video could behave like a gif image, and only show its control bar when I hover on it.

I tries the solution in https://stackoverflow.com/a/23280182/11140547 (adding the script to the <head> as shown in above codes), but it failed in Chrome/Edge.

This should probably help, please let me know if it doesn't: https://stackoverflow.com/a/23280182/16921211 — Major_Flux-, Feb 16 '23 at 05:44
@Major_Flux- I have tried this on Chrome and Edge before, but it didn't work for me. It seems well in JSFiddle, but when I open the html file with my browser, it failed. I added the script in `` as shown in the code in my question. — dawnlh, Feb 16 '23 at 07:50
@Major_Flux- A simple but inelegant solution might be covering a keyframe image onto the video block, and when hovering, make the image hide and show the video. — dawnlh, Feb 17 '23 at 07:37

score 0 · Accepted Answer · answered Feb 19 '23 at 08:04

<!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>
        function video_show_control(obj)
        {
            if (!obj.hasAttribute("controls")) {
                obj.setAttribute("controls", "")
                }

        }
        function video_hide_control(obj)
        {       
            if (obj.hasAttribute("controls")) {
                    obj.removeAttribute("controls")
                    }
        }
        </script>

    </head>
    <body>
        <div>
         This is a video for test.
        </div>
        
        <div>
        <video id="myvideo" class="video_preview" width="40%" height="40%" muted="" autoplay="" loop=""  controlslist="nodownload noremoteplayback noplaybackrate foobar" disablepictureinpicture="" src="http://www.computationalimaging.org/wp-content/uploads/2020/08/neuralholography_citl_holographic_display.mp4" onmouseover="video_show_control(this)" onmouseout="video_hide_control(this)">Your browser does not support the video tag.</video>
        </div>
    </body>
</html>

This code works well (doesn't require jquery).

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Feb 22 '23 at 22:17

how to avoid the automatically "appearing then disappearing" behavior of html video control bar?

1 Answers1