如何在不干扰本机控件的情况下向我的 HTML5 视频添加点击播放？

Posted 2023-05-07

【中文标题】如何在不干扰本机控件的情况下向我的 HTML5 视频添加点击播放？

【英文标题】：How can I add click-to-play to my HTML5 videos without interfering with native controls?

【发布时间】：2012-08-06 12:44:45

【问题描述】：

我正在使用以下代码向 html5 视频添加点击播放功能：

$('video').click(function() 
  if ($(this).get(0).paused) 
    $(this).get(0).play();
  
  else 
    $(this).get(0).pause();
  
);

除了会干扰浏览器的原生控件外，它工作正常：也就是说，当用户单击暂停/播放按钮时，它会捕获，立即反转他们的选择并使暂停/播放按钮无效。

有没有办法在 DOM 中选择 just 视频部分，或者如果失败了，有一种方法可以捕获对视频容器的 controls 部分的点击，所以当用户按下暂停/播放按钮时，我可以忽略/反转点击播放功能吗？

【参考方案1】：

您可以在捕捉点击事件的视频顶部添加一个图层。然后在播放视频时隐藏该图层。

（简化的）标记：

<div id="container">
    <div id="videocover">&nbsp;</div>
    <video id="myvideo" />
</div>

脚本：

$("#videocover").click(function() 
    var video = $("#myvideo").get(0);
    video.play();

    $(this).css("visibility", "hidden");
    return false;
);

$("#myvideo").bind("pause ended", function() 
    $("#videocover").css("visibility", "visible");
);

CSS：

#container 
    position: relative;


/*
    covers the whole container
    the video itself will actually stretch
    the container to the desired size
*/
#videocover 
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

【讨论】：

是的，这适用于初始播放，但不适用于之后暂停/播放视频。

是的，它仅在视频 暂停时有效。否则 heff 的解决方案就是你要找的。​​span>

这是我正在寻找的 90%（希望保留点击暂停功能），但足够接近。谢谢！我必须做的一个小改动是给封面一个z-index 值：否则，它会出现在视频容器下方。

是的，对不起，我错过了。或者您可以在视频之后定义封面，使其自动位于上方。标记中较晚出现的元素会自动呈现在较早出现的元素之上（除非您将其与position: relative 或z-index 混淆）。

【参考方案2】：

我知道这是一个老问题，但我遇到了同样的问题并找到了其他解决方案！ 点击播放视频，点击暂停。但作为原始海报，我遇到了控件问题。像这样解决了 jquery 的问题：

$("video").click(function (e) 
    if(e.offsetY < ($(this).height() - 36)) // Check to see if controls where clicked
    
        if(this.paused)
            this.play();
        else
            this.pause();
    
);

我检查点击中的偏移量，如果它超出了控件，我的播放/暂停功能不会做任何事情。

【讨论】：

我喜欢，效果很好。我想知道是否有人遇到这种方法的问题

【参考方案3】：

您可以尝试 event.stopPropagation 看看是否有效。虽然我认为这会阻止本机控件工作，或者根本不做任何事情。

$('video').click(function(event) 
  event.stopPropagation();
  if ($(this).get(0).paused) 
    $(this).get(0).play();
  
  else 
    $(this).get(0).pause();
  
);

如果浏览器认为本机控件和视频都是同一个元素的一部分（我相信他们确实如此），那么您可能就不走运了。 jQuery 的 event.target 不允许您区分单击视频和单击控件之间的区别。

所以我认为你最好的选择是build your own controls（旧教程，仍然很简单）。或者要求浏览器开发人员在启用控件时单击视频播放/暂停。似乎默认情况下应该这样做。

【讨论】：

不幸的是，event.stopPropagation() 在这种情况下什么也没做。

【参考方案4】：

这里有很好的答案。谢谢你的这些。这是我想出的使控件可点击的技巧，所有 jQuery。

$('#video_player').click(function(e)

    var y = e.pageY - this.offsetTop;

    //Subtract how much control space you need in y-pixels.
    if(y < $(this).height() - 40) 
    
        //$(this).get(0).play();
        //... what else?
    

);

【参考方案5】：

Torsten Walter's solution 工作得很好，它是一个相当优雅的问题解决方案，它可能是处理它的最佳方法，即使它不处理点击暂停。然而，他的解决方案让我想到了一个 hacky 方法来做到这一点，我想出了这个：

标记

<div id="container">
  <div id="videocover">&nbsp;</div>
  <video id="myvideo" />
</div>

javascript

$('#videocover').click(function(event) 
  var video = $('#myvideo')[0];
  if (video.paused) 
    video.play();
  
  else 
    video.pause();
  
  return false;
);

CSS

#container 
  position: relative;


#videocover 
  position: absolute;
  z-index: 1;
  height: 290px; /* Change to size of video container - 25pxish */
  top: 0;
  right: 0;
  bottom: 0;
  left;

基本上，它始终保持可点击的封面以处理点击播放/点击暂停功能，但确保封面不与视频底部的控件重叠。

这当然是一个拼凑，因为它：

假设所有浏览器将控件放置在同一区域，并且控件的高度相同 需要在 CSS 中指定视频容器的高度 防止当鼠标悬停在视频上时出现控件

但我想我会把它放在那里。

【讨论】：

问题是，你不能说视频底部只有控件。如果玩家有某种浮动控件怎么办？

@TorstenWalter 我在回答的最后提到了这一点。