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

您将要使用传递给点击处理程序的事件对象（在下面的示例中为evt）来确定用户在播放器上的点击位置。

在下面的示例中，我们查看事件对象的target属性，以确定哪个元素触发了事件。然后，我们检查tagName属性。如果它不等于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/big-buck-bunny-1080p@0.0.6/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>

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

1 个答案: