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

Posted 2023-05-07

【中文标题】隐藏视频控件，直到用户将鼠标悬停在视频上

【英文标题】：Hide Video Controls Until User Hover Over Video

【发布时间】：2014-06-10 09:18:13

【问题描述】：

我正在尝试隐藏视频上的视频控件，直到用户将鼠标悬停在视频上，然后控件才会显示。有什么想法或建议吗？谢谢。 而且我有不止一个视频。

html：

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

【问题讨论】：

你尝试过什么？

HTML5 video - show/hide controls programtically 的可能重复项

我试过这个：jsfiddle.net/dySyv/1。但它仅在单击时删除控件

看看我的例子。它是通过悬停完成的。

嗯，我不认为这是重复的，因为当用户将鼠标悬停在视频本身时，我正在尝试这样做。

【参考方案1】：

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

Working Example

$('#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   id="myvideo">
    <source src="#" type="video/mp4" />
</video>

---

更新： 你提到你有几个视频。所以你可以使用同样的逻辑，只需在$( ) 中添加额外的选择器。这是一个例子：

$('#yourID1, #yourID2, #yourID3').hover(function toggleControls()  ...

这样做会收听或等到它检测到您将鼠标悬停在其中一个 ID 上。

Updated fiddle

【讨论】：

所以它适用于 jsfiddle，但不适用于我的浏览器。是不是因为我有多个视频，所以 getElementByID 不起作用？

您的页面中是否包含 jQuery？您是否正在更新代码的$('#myvideo') 部分？我不确定你是否熟悉 jQuery，但那是你的元素选择器。 '#insertYourIDHere'。如果你有多个视频，你可以在那里传递多个 ID。我会更新上面的代码。

感谢您的帮助，它正在工作。不，我对 jQuery 不太熟悉，对它还是很陌生。

使用 if 语句有其缺陷，例如当用户急于将视频悬停时，if 语句效果将被反转，因此当用户在视频表面之外时显示控件

@purple11111 我刚刚在 | 中做了这个简单的 jQuery hover切换jsfiddle.net/Wandile/hmL837zn 如果您希望控件默认不显示，您可以默认删除controls 属性

【参考方案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");
    
);

【参考方案3】：

未经测试，但我相信这会奏效。它使用 javascript 而不是 CSS。

<div class="item spoon burger"><video id="videoElement"  ><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>

【讨论】：

我测试了这个解决方案：它可以工作并且不需要 Jquery，这很棒。谢谢@sean-bright！

这是一个有用的开始！我必须在回调中将this 替换为v，将属性设置为'controls' 而不是true，并添加一行以禁用加载控件。这里的工作解决方案：***.com/a/66299017/1079110

您需要将this 更改为v，因为this has a different meaning when used in a function vs. an arrow function。

此外，由于 Javascript 的隐式类型转换，使用 'controls' 而不是 true 只是将 'controls' 隐式转换为 true。 The controls property is a boolean, not a string.

【参考方案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>

【参考方案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！

【讨论】：

虽然目标相似，但这并不能回答 OP 的问题。他希望它悬停。之前的帖子已经在最初的 cmets 中链接到了。

@EnigmaRM 该评论是在此答案之后发布的。