如何判断用户是否点击了视频元素或其中一个视频控件？ [英] How to tell if user clicked video element or one of the video controls?

问题描述

拥有控件的html5 视频元素，如：

Having a html5 video element with controls, like:

<video class="media video" src="somevid.ogg" controls></video>

并为其分配了一个点击处理程序：

And with a click handler assigned to it:

$('.media.video').on('click', function (event) { /* ... */ });

如果用户只是点击视频元素或其中一个，是否可以在处理程序方法中确定控件？

Is it possible to determine inside the handler method if the user simply clicked the video element or one of the controls?

没有找到关于这个的文档，并在事件对象中搜索线索，但没有成功。

Haven't found documentation on this one, and searched the event object for clues, but no success.

1. 为视频分配所有听众，并根据视频更改事件确定是否点击了一个控制元素，或视频 - 太麻烦了unclean 。


2. 使用自定义控件用户界面，默认为禁用 - 如果我的问题没有答案，我会选择。

1. Assign all listeners to the video, and based on video change events determine if the click has been made on a control element, or the video - is too much hassle & unclean.
2. Use custom control UI, with the default one disabled - if there is no answer for my question i'd go with this.

推荐答案

是否有可能在处理程序方法内部确定用户
只需点击视频元素或其中一个控件？

Is it possible to determine inside the handler method if the user simply clicked the video element or one of the controls?

不，控件被视为视频的一部分元素本身，因为它们是由浏览器内部提供的。因此，单击该元素只会注册该子元素而不是子元素。

No, the controls are considered part of the video element itself as they are provided internally by the browser. Therefor a click on the element will only register with that and not the sub-elements.

您可以使用您的＃1点来听取对应的各种命令事件单击一个控件。 IMO我推荐的正确方法。

You could use your point #1 though to listen to the various command events which corresponds to clicking a control. IMO the proper way which I would recommend.

如果你只需要确定视频上是否有点击，你可能会做一个简单的高度检查但是控件的布局/外观可能会在下周发生变化，并强制进行浏览器版本检查以获得准确的高度，这是错误的方向。

If you only need to determine if click was on the video or not you could probably get away with doing a simple height check but layout/look of the controls could change "next week" and force a browser version check to get accurate height which is going the wrong direction.

但是，例如，在click / mousedown或mouseup的事件处理程序：

But for example, inside the event handler for click/mousedown or mouseup:

var rect = videoElement.getBoundingClientRect(),  // get abs. position of element
    ctrlHeight = 40,                              // a guess of ctrl area height
    y = event.clientY - rect.top;                 // relative y pos. to video el

if (y >= rect.height - ctrlHeight) {...in ctrl area...}

另一种方法，但更多的工作，就是在你的观点＃2中提供你自己的控制。既可以是按钮，也可以是图像和图像的形式，甚至可以将它们渲染到画布上。这使您可以完全控制放置，外观等。

The other approach, but a tad more work, is to provide your own controls as in your point #2. Either as buttons or in form of image and image map, or even render them to canvas. This gives you full control of placement, looks and so forth.

您可能最终会得到与第一种方法相同数量的事件处理程序，因为您需要听取每个按钮的事件......

You will probably end up with the same amount of event handlers as in the first approach as you will need to listen to the events for each button instead...

这篇关于如何判断用户是否点击了视频元素或其中一个视频控件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！