Video-Js点击事件：如何不在控制栏按钮上触发

Question

我是Video-js的新手，我想用它来在我的网站上放置一个视频播放器而我正试图在视频上添加自定义的“点击”事件（或“点击”用于移动设备），以覆盖自然video-js播放器的行为。当我点击或点按视频时，我希望播放下一个视频，而不是谷歌播放/暂停视频。

代码可以工作，但即使我点击控制栏上的控件按钮按钮，事件也会触发，如：播放，音量，全屏。

如果您希望仅在用户单击视频时（但不是在控制栏的按钮上）触发click事件，或者在事件函数中是否进行测试以测试是否已完成点击，是否还有其他事件名称可供使用控制栏在执行代码之前返回？

目前我只有这个：

var player = videojs('videojs-player', {}, function() {//some code} ); 

player.on('click', function() { 
    alert('video was clicked'); 
// do something
};

非常感谢您的帮助。

Answer 1

您将需要使用传递给Click处理程序的事件对象（下例中的evt）来识别用户单击的播放器上的位置。

在下面的示例中，我们查看事件对象的target属性，以确定触发事件的元素。然后我们检查tag​Name属性。如果它不等于VIDEO，我们忽略点击。

var player = videojs('videojs-player', {}, function() {
  //some code
});

player.on('click', function(evt) { 
  if (evt.target.tagName === 'VIDEO') {
    console.log('video was clicked'); 
  }
});

<link href="https://vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/5.4.6/video.min.js"></script>
<video id="videojs-player" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264">
  <source src="https://cdn.jsdelivr.net/npm/[email protected]/video.mp4" type="video/mp4" />
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>