隐藏视频控件直到用户将鼠标悬停在视频上

Question

我试图隐藏视频上的视频控件,直到用户将鼠标悬停在视频上,然后显示控件.有什么想法或建议吗？谢谢.我有不止一个视频.

HTML:

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

Answer 1

我们可以通过几行jQuery实现这一点,使用.hover():

工作实例

$('#myvideo').hover(function toggleControls(){if(video.hasAttribute("controls")){video.removeAttribute("controls")} else {video.setAttribute("controls","controls") }})

编辑我错误地将变量留在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上.

更新了小提琴

Answer 2

@ EnigmaRM答案的一个问题是,如果jQuery以某种方式错过了一个hover事件,那么控件可能会以"错误"方式切换 - 也就是说,它们会在鼠标输入时消失并在鼠标离开时重新出现.

相反,我们可以确保控件始终显示和正确消失event.type:

$("#myvideo").hover(function(event) {
    if(event.type === "mouseenter") {
        $(this).attr("controls", "");
    } else if(event.type === "mouseleave") {
        $(this).removeAttr("controls");
    }
});

Answer 3

未经测试，但我相信这会起作用。它使用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>