如何在隐藏Video.js控件时实现点击暂停自动播放的视频？

嘿，这个需求完全可以实现！其实Video.js本身就支持通过点击视频区域来控制播放状态，只是因为你隐藏了原生控件，需要手动绑定这个交互逻辑。下面是具体的实现方法：

步骤1：优化现有HTML代码（适配自动播放规则） #

你原来的HTML代码基础没问题，但要注意现代浏览器的自动播放策略：大部分浏览器要求自动播放的视频必须静音，否则会被阻止。所以可以在data-setup里加上"muted": true来提升自动播放成功率：

<video id="my-video" class="video-js" controls preload="auto" data-setup='{ "controls": false, "loop": true, "autoplay": true, "preload": "auto", "muted": true }'>
  <source src="vid/gh.mp4" type='video/mp4'>
</video>

步骤2：添加JavaScript绑定点击事件 #

接下来只需要几行JS代码，就能给视频绑定点击切换播放/暂停的功能：

// 等待页面DOM加载完成，避免找不到播放器元素
document.addEventListener('DOMContentLoaded', function() {
  // 通过ID获取Video.js播放器实例
  const player = videojs('my-video');
  
  // 给视频区域绑定点击事件
  player.on('click', function() {
    // 切换播放状态：暂停则播放，播放则暂停
    if (player.paused()) {
      player.play();
    } else {
      player.pause();
    }
  });
});

代码说明： #

• DOMContentLoaded确保我们在页面元素加载完成后再操作播放器，避免出现找不到元素的报错。
• videojs('my-video')通过你设置的视频ID，获取到Video.js的官方播放器对象，这样就能调用它的API了。
• 监听click事件后，通过player.paused()判断当前视频状态，调用对应的play()或pause()方法实现切换。

这样设置之后，你点击视频任意区域就能轻松暂停/播放了，完全不需要显示控件，完美符合你的需求！

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