我正在尝试隐藏视频上的视频控件，直到用户将鼠标悬停在视频上，然后控件才会显示。有什么想法或建议吗？谢谢。 而且我有不止一个视频。
HTML：
<div class="item spoon burger"><video width="300" height="auto" controls><source src="videos/sruthi.mp4" type="video/mp4"></video></div>
【问题讨论】：
标签： html css html5-video
我们可以通过几行 jQuery 来实现这一点，利用 .hover():
$('#myvideo').hover(function toggleControls() { if (video.hasAttribute("controls")) { video.removeAttribute("控件") } 别的 { video.setAttribute("控件", "控件") } })编辑 我错误地将变量video 留在了上面的代码中。我将其更改为 this，这样您就不必管理获取 ID 的变量。
$('#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>
更新：
你提到你有几个视频。所以你可以使用同样的逻辑，只需在$( ) 中添加额外的选择器。这是一个例子：
$('#yourID1, #yourID2, #yourID3').hover(function toggleControls() { ...
这样做会收听或等到它检测到您将鼠标悬停在其中一个 ID 上。
【讨论】：
$('#myvideo') 部分？我不确定你是否熟悉 jQuery，但那是你的元素选择器。 '#insertYourIDHere'。如果你有多个视频，你可以在那里传递多个 ID。我会更新上面的代码。
hover切换jsfiddle.net/Wandile/hmL837zn 如果您希望控件默认不显示，您可以默认删除controls 属性
@EnigmaRM 回答的一个问题是，如果 jQuery 以某种方式错过了 hover 事件，则控件可能会以“错误”的方式切换 - 也就是说，它们会在鼠标进入时消失并在鼠标离开时重新出现。
相反，我们可以使用event.type 确保控件始终正确显示和消失：
$("#myvideo").hover(function(event) {
if(event.type === "mouseenter") {
$(this).attr("controls", "");
} else if(event.type === "mouseleave") {
$(this).removeAttr("controls");
}
});
【讨论】：
未经测试，但我相信这会奏效。它使用 JavaScript 而不是 CSS。
<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>
【讨论】：
this 替换为v，将属性设置为'controls' 而不是true，并添加一行以禁用加载控件。这里的工作解决方案：stackoverflow.com/a/66299017/1079110
this 更改为v，因为this has a different meaning when used in a function vs. an arrow function。
'controls' 而不是 true 只是将 'controls' 隐式转换为 true。 The controls property is a boolean, not a string.
<script>
function setupVideos() {
for (const video of document.querySelectorAll('video')) {
video.controls = false
video.addEventListener('mouseover', () => { video.controls = 'controls' })
video.addEventListener('mouseout', () => { video.controls = false })
}
}
window.addEventListener('load', setupVideos, false)
</script>
【讨论】：
上一篇文章解释了如何做到这一点HTML5 video - show/hide controls programmatically
<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>
检查他们的解决方案是否适合您！如果是，请+1！
【讨论】：