Video.js移动端浏览器点击视频无法播放暂停问题求助

问题原因 #

Video.js 8.x在移动端默认关闭了视频本体的点击播放/暂停功能，哪怕配置userActions: {click: true}也没用——这个配置在新版本里的逻辑已经调整，不再直接控制移动端的点击行为，而且官网的示例也存在同样的问题，属于版本特性导致的。

可行解决方案 #

手动给视频实例绑定点击事件，区分控制栏和视频区域的点击，自行处理播放/暂停逻辑：

代码示例 #

var player1 = videojs('my-video1', {
  controls: true,
  autoplay: false,
  preload: 'auto'
});

// 监听视频点击事件
player1.on('click', function(e) {
  // 过滤控制栏的点击，避免重复触发状态切换
  if (!e.target.closest('.vjs-control-bar')) {
    this.paused() ? this.play() : this.pause();
  }
});

注意事项 #

• 必须排除控制栏的点击，不然点击播放按钮时会触发两次状态切换
• 建议在真实移动端设备测试，浏览器的移动端模拟器可能存在行为差异
• 如果只需要在移动端生效，可以先判断设备类型再绑定事件，避免影响桌面端原有逻辑

内容的提问来源于stack exchange，提问作者luke_mclachlan