javascript - 如何在不干扰 native 控件的情况下向我的 HTML5 视频添加点击播放功能？

Question

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

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

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

有没有一种方法可以只选择 DOM 中的视频部分，或者没有一种方法可以捕获对视频容器的控件部分的点击，所以当用户按下暂停/播放按钮时，我可以忽略/取消点击播放功能吗？

Answer 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;
}