Html 隐藏视频控件，直到用户将鼠标悬停在视频上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23279899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide Video Controls Until User Hover Over Video
提问by user3453264
i'm trying to hide the video controls on my video, until the user hover over the video, then the controls shows up. Any idea or advice? Thanks. And I've got more than one video.
我试图在我的视频上隐藏视频控件，直到用户将鼠标悬停在视频上，然后控件才会显示出来。有什么想法或建议吗？谢谢。而且我有不止一个视频。
HTML:
HTML：
<div class="item spoon burger"><video width="300" height="auto" controls><source src="videos/sruthi.mp4" type="video/mp4"></video></div>
回答by EnigmaRM
We can accomplish this through just a couple lines of jQuery, making use of .hover():
我们可以通过几行 jQuery 来实现这一点，利用.hover()：
EditI mistakenly left the variable videoin the code above. I changed it to thisso that you won't have to manage variables that grab an ID.
编辑我错误地将变量留video在了上面的代码中。我将其更改为this这样您就不必管理获取 ID 的变量。
$('#myvideo').hover(function toggleControls() {
if (this.hasAttribute("controls")) {
this.removeAttribute("controls")
} else {
this.setAttribute("controls", "controls")
}
})
HTML
HTML
<video width="300" height="auto" id="myvideo">
<source src="#" type="video/mp4" />
</video>
Update:You mentioned that you have several videos. So you can use this same logic, and just add additional selectors into $( ). Here's an example:
更新：你提到你有几个视频。因此，您可以使用相同的逻辑，只需将其他选择器添加到$( ). 下面是一个例子：
$('#yourID1, #yourID2, #yourID3').hover(function toggleControls() { ...
Doing that will listenor wait until it detects that you're hovering over one of those IDs.
这样做将侦听或等到它检测到您将鼠标悬停在这些 ID 之一上。
回答by rickcnagy
One issue with @EnigmaRM's answer is that if jQuery somehow misses a hoverevent, the controls can be toggled the "wrong" way - that is, they disappear on mouse enter and reappear on mouse leave.
@EnigmaRM 的答案的一个问题是，如果 jQuery 以某种方式错过了一个hover事件，则控件可以以“错误”的方式切换 - 也就是说，它们在鼠标进入时消失并在鼠标离开时重新出现。
Instead, we can ensure that the controls alwaysappear and disappear correctly with event.type:
相反，我们可以确保控件始终正确显示和消失event.type：
$("#myvideo").hover(function(event) {
if(event.type === "mouseenter") {
$(this).attr("controls", "");
} else if(event.type === "mouseleave") {
$(this).removeAttr("controls");
}
});
回答by Sean Bright
Untested, but I believe this would work. It uses JavaScript instead of CSS.
未经测试，但我相信这会奏效。它使用 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>
回答by 3066d0
A previous post explained how to do it this way HTML5 video - show/hide controls programmatically
上一篇文章解释了如何以这种方式实现HTML5 视频 - 以编程方式显示/隐藏控件
<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>
Check if their solution works for you! Please +1 them if so!
检查他们的解决方案是否适合您！如果是这样，请+1！
