css 如何避免html视频控件条自动“出现后消失”的行为？

tf7tbtn2 于 2023-02-20 发布在其他

关注(0)|答案(1)|浏览(183)

由html中的<video>标签定义的视频会自动显示它的控制栏，然后在每次加载到当前窗口中时几秒钟后隐藏该栏。但我想取消自动显示行为，并使控制栏只在我悬停在它上面时才显示。有简单的解决方案吗？
下面是一个例子：把代码保存到html文件中，每次你在浏览器中打开它或者从其他标签切换到它的标签时，视频控制条会自动出现和消失一次。

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

我希望视频可以像一个gif图像，只有当我悬停在它上面时才显示它的控制栏。
我在https://stackoverflow.com/a/23280182/11140547中尝试了这个解决方案（将脚本添加到<head>中，如上面的代码所示），但在Chrome/Edge中失败了。

css

来源：https://stackoverflow.com/questions/75467975/how-to-avoid-the-automatically-appearing-then-disappearing-behavior-of-html-vi

1条答案

按热度按时间

bq3bfh9z1#

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

这段代码运行良好（不需要jquery）。

赞(0）回复(0）举报 2023-02-20

我来回答

css 如何避免html视频控件条自动“出现后消失”的行为？

1条答案

相关问题

热门标签

最新问答