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

How can I add click-to-play to my HTML5 videos without interfering with native controls?

提问by Torsten Walter

I'm using the following code to add click-to-play functionality to HTML5 video:

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

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

It works okay except that it interferes with the browser's native controls: that is, it captures when a user clicks on the pause/play button, immediately reversing their selection and rendering the pause/play button ineffective.

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

Is there a way to select justthe video part in the DOM, or failing that, a way to capture clicks to the controlspart of the video container, so that I can ignore/reverse the click-to-play functionality when a user presses the pause/play button?

有没有办法选择只在DOM的视频部分，或做不到这一点，一个方法来捕获点击到控制视频容器的一部分，让我可以忽略/后退的点击播放功能，当用户按下暂停/播放按钮？

回答by Torsten Walter

You could add a layer on top of the video that catches the click event. Then hide that layer while the video is playing.

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

The (simplified) markup:

（简化的）标记：

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

The script:

剧本：

$("#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");
});

The CSS:

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

回答by Kristofer K?llsbo

I know this is an old question but I ran into the same issue and found an other solution! Playing the video on click and also pause it on click. But as the original poster I ran into problems with the controls. Solved the issue with jquery like this:

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

I check the offset in the click and if it is over the controls my play/pause functions doesn't do anything.

我检查了点击中的偏移量，如果它超过了控件，我的播放/暂停功能就不会执行任何操作。

回答by heff

You could try event.stopPropagation and see if that works. Though I think that would either stop the native controls from working, or just not do anything.

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

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

If the browser considers the native controls and video all part of the same element (and I believe they do) you're probably out of luck. jQuery's event.target wouldn't allow you to tell the difference between a click on the video and a click on the controls.

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

So I think your best option is to build your own controls(old tutorial, still pretty straight forward). Or ask the browser devs to make a click on the video play/pause when controls are enabled. Seems like it should do that by default.

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

回答by sampoh

Great answers here. Thank you for these. Here's a trick I figured out for making controls clickable, all jQuery.

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

});

回答by sampoh

Torsten Walter's solutionworks well and it's a fairly elegant solution to the problem, and it's probably the best way to handle it, even if it doesn't handle click-to-pause. However, his solution got me thinking about a hacky way to do it, and I came up with this:

Torsten Walter 的解决方案运行良好，它是一个相当优雅的问题解决方案，它可能是处理它的最佳方式，即使它不处理点击暂停。然而，他的解决方案让我想到了一种黑客方法来做到这一点，我想出了这个：

Markup

标记

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

JavaScript

JavaScript

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

CSS

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

Basically, it keeps the clickable cover up all the time to handle the click-to-play/click-to-pause functionality, but makes sure the cover doesn't overlap with the controls at the bottom of the video.

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

This is, of course a kludge, as it:

这当然是杂七杂八的，因为它：

• assumes all browsers place the controls in the same area, and that the controls are the same height
• requires specifying the height of the video container in CSS
• prevents the controls from appearing when the mouse hovers over the video

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

But I figured I'd put it out there.

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