最近用到 video.js 来播放 HLS 视频,因为视频为实时监控画面,所以不需要单击暂停功能,以免用户误操作。
网上大多数解决办法都是通过CSS来屏蔽鼠标事件:
.vjs-tech { pointer-events: none; }
但是 video.js 从 7.1.0 开始,增加了一个很方便的功能:双击画面切换全屏。
如果用了上面的办法,双击全屏功能也失效了。我想保留这个功能。
后来找到两全其美的解决办法:
// player 为 video.js 实例 // video.js 7.1.0 - 7.5.6 // 感谢:https://github.com/videojs/video.js/issues/3250#issuecomment-481642162 player.tech_.off('mousedown'); player.tech_.on('mousedown', function(e) { e.preventDefault(); }); // video.js 7.6.0 - 7.14.3 // video.js 7.6.0 中,'mousedown'事件改为'mouseup' (#5992) (075a504) player.tech_.off('mouseup'); player.tech_.on('mouseup', function(e) { e.preventDefault(); }); // video.js 7.15.0 - 7.16.0 // https://github.com/videojs/video.js/pull/7302 player.tech_.off('click'); // video.js 7.17.0+ // https://github.com/videojs/video.js/pull/7495 videojs('my-player', { userActions: { click: false } });
重要提示:如果遇到错误提示 tech_ 为 undefined,则将设置 src 改在上述代码之后,即初始化选项中不包含src,最后再执行 player.src({src: ‘*******’})
作者你好,我写了这两个方法单击暂停还是存在,请问您可以发我一下您写的具体代码吗
可能是 video.js 版本不同的原因,文章已更新 video.js 新版处理方法,欢迎测试、反馈。