如何在video.js中实现点击缩略图一键触发视频自动播放并全屏

首先明确：不需要遍历所有视频元素做单独绑定，通过事件委托即可实现全局统一的功能预设，后续新增视频也无需修改JS代码，自动适配规则。

实现步骤 #

1. 统一HTML结构约定 #

所有缩略图和对应视频通过自定义属性关联，示例结构如下：

<!-- 缩略图：统一加video-thumbnail类，用data-video-id绑定对应video的id -->
<div class="video-thumbnail" data-video-id="video-001">
  <img src="xxx-cover.jpg" alt="视频预览图">
</div>
<!-- 对应视频：id和上方data-video-id一致，默认隐藏即可 -->
<video id="video-001" class="global-video" hidden controls>
  <source src="xxx.mp4" type="video/mp4">
</video>

<!-- 新增视频只需按相同规则写结构，不需要修改JS -->
<div class="video-thumbnail" data-video-id="video-002">
  <img src="yyy-cover.jpg" alt="视频预览图">
</div>
<video id="video-002" class="global-video" hidden controls>
  <source src="yyy.mp4" type="video/mp4">
</video>

2. 全局JS功能预设 #

只需在页面全局加载一次以下脚本即可，无需针对单个视频做配置：

document.addEventListener('click', async (e) => {
  // 只匹配指定类的缩略图点击事件
  const targetThumb = e.target.closest('.video-thumbnail')
  if (!targetThumb) return

  // 获取对应视频元素
  const videoEl = document.getElementById(targetThumb.dataset.videoId)
  if (!videoEl) return

  try {
    // 先触发播放（用户主动点击符合浏览器自动播放规则，不会被拦截）
    await videoEl.play()
    // 兼容多浏览器触发全屏
    const fullscreenApi = videoEl.requestFullscreen ||
                          videoEl.webkitRequestFullscreen ||
                          videoEl.mozRequestFullScreen ||
                          videoEl.msRequestFullscreen
    fullscreenApi.call(videoEl)
  } catch (err) {
    console.error('操作失败：', err)
  }
})

注意事项 #

• 全屏操作需要在用户主动交互的回调中触发，上述点击场景符合浏览器安全规则，不会被拦截
• 如果需要退出全屏时暂停视频，可以额外监听fullscreenchange事件做对应处理
• 所有新增视频只要符合HTML结构约定，自动继承该功能，不需要额外修改代码

内容的提问来源于stack exchange，提问作者C.Hillert