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

最近用到 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 7 禁用单击暂停,保留双击全屏”的2个回复

发表回复

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