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()：

Working Example

<德尔> $（＆＃39; #myvideo＆＃39;）。hover（function toggleControls（）{ if（video.hasAttribute（＆＃34; controls＆＃34;））{ video.removeAttribute（＆＃34;控制＆＃34） } else { video.setAttribute（＆＃34; controls＆＃34;，＆＃34; controls＆＃34;） } }）

修改我错误地将变量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上。

Updated fiddle

Answer 2

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

相反，我们可以确保控件始终在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>

Answer 4

<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>

Answer 5

上一篇文章解释了如何以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！

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

5 个答案: