video.js 7 禁用单击暂停,保留双击全屏

最近用到 video.js 来播放 HLS 视频,因为视频为监控画面,所以不需要单击暂停功能,以免用户误操作。

网上大多数解决办法都是通过CSS来屏蔽鼠标事件:

.vjs-tech {
    pointer-events: none;
}

但是 video.js 从 7.1.0 开始,增加了一个很方便的功能:双击画面切换全屏。

如果用了上面的办法,双击全屏功能也失效了。我想保留这个功能。

后来找到两全其美的解决办法:

// player 为 video.js 实例

player.tech_.off('mouseup');
player.tech_.on('mouseup', function(e) {
    e.preventDefault();
});

感谢:https://github.com/videojs/video.js/issues/3250#issuecomment-481642162

更新:video.js 7.6 中,’mousedown’事件改为’mouseup’ (#5992) (075a504)

重要提示:如果遇到错误提示 tech_ 为 undefined,则将设置 src 改在上述代码之后,即初始化选项中不包含src,最后再执行 player.src({src: ‘*******’})

发表评论

电子邮件地址不会被公开。 必填项已用*标注