隐藏视频控件，直到用户将鼠标悬停在视频上 [英] Hide Video Controls Until User Hover Over Video

问题描述

我要隐藏视频上的视频控件，直到用户将鼠标悬停在视频上，然后控件就会显示出来。任何想法或建议？谢谢。 我有多个视频。

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：

<div class="item spoon burger"><video width="300" height="auto" controls><source src="videos/sruthi.mp4" type="video/mp4"></video></div>

推荐答案

我们可以通过几行jQuery ，使用 .hover（）：

We can accomplish this through just a couple lines of jQuery, making use of .hover():

工作示例

编辑我错误地离开了变量 video 。我将其更改为此，以便您不必管理获取ID的变量。

Edit I mistakenly left the variable video in the code above. I changed it to this so that you won't have to manage variables that grab an 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>

---

更新：
你提到你有几个视频。所以你可以使用这个相同的逻辑，只需添加额外的选择器到 $（）。这里有一个例子：

---

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() { ...

这样做会 将鼠标悬停在其中一个ID上。

Doing that will listen or wait until it detects that you're hovering over one of those IDs.

更新了小提琴

这篇关于隐藏视频控件，直到用户将鼠标悬停在视频上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！