18

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

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

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

有没有办法只选择DOM中的视频部分，或者失败了，有一种方法可以捕获对视频容器的控件部分的点击，这样我就可以在用户按下时忽略/反转点击播放功能暂停/播放按钮？

4

5 回答 5

18

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

（简化的）标记：

<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;
}
于 2012-08-09T20:56:01.043 回答
4

我知道这是一个老问题，但我遇到了同样的问题并找到了其他解决方案！点击播放视频，点击暂停。但作为原始海报，我遇到了控件问题。像这样用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();
    }
});

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

于 2013-12-20T02:35:36.857 回答
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 不允许您区分单击视频和单击控件之间的区别。

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

于 2012-08-09T20:52:50.183 回答
1

这里有很好的答案。谢谢你的这些。这是我想出的使控件可点击的技巧，所有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?
    }

});
于 2013-04-19T13:46:28.067 回答
0

Torsten Walter 的解决方案效果很好，它是一个相当优雅的问题解决方案，它可能是处理它的最佳方法，即使它不处理点击暂停。然而，他的解决方案让我想到了一个 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 中指定视频容器的高度
  • 防止鼠标悬停在视频上时出现控件

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

于 2012-08-10T08:58:11.270 回答