英文:
how to avoid the automatically "appearing then disappearing" behavior of html video control bar?
问题
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="width=device-width, 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 中失败。
英文:
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.
答案1
得分: 0
<!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>
英文:
<!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).
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论