时间戳

首页 > 解决方案 > Video-Js 点击事件：如何不触发控制栏按钮

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

问题描述

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

该代码有效，但即使我点击控制栏的按钮，其中有控制按钮，如：播放，音量，全屏，事件也会触发。

如果您希望仅在用户单击视频（而不是在控制栏的按钮上）时触发单击事件，是否需要使用另一个事件名称，或者是否在事件函数中进行测试以测试是否完成了单击在执行代码之前要返回控制栏？

目前我只有这个：

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

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

非常感谢您的帮助。

标签： javascripteventsclickvideo.js

解决方案

您需要使用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/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>

推荐阅读