如何实现用户首次点击视频后显示video控件？

你的代码核心问题是事件监听的回调写法错误：直接调用setAttribute("controls", "true")会导致页面一加载就给视频加上控件，而不是点击时才触发。下面是修正方案：

单个视频的修正代码 #

HTML（你的代码已正确设置海报，保持即可） #

<div class="container1">
  <video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1"> 
  </video>
</div>

修正后的JS #

<script>
  const video = document.getElementById("video1");
  video.addEventListener("click", function() {
    // 为视频添加控件
    this.setAttribute("controls", "true");
    // 点击海报后自动播放视频，提升用户体验
    this.play();
  });
</script>

多个视频的批量处理方案 #

如果站点有多个视频，不用逐个写ID，用类名批量处理更高效：

HTML示例 #

<div class="container1">
  <video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="custom-video"></video>
</div>
<div class="container2">
  <video src="Videos/Film 2.mp4" poster="Thumbnails/Film 2.jpg" class="custom-video"></video>
</div>

对应JS代码 #

<script>
  // 获取所有带custom-video类的视频元素
  const videos = document.querySelectorAll(".custom-video");
  videos.forEach(video => {
    video.addEventListener("click", function() {
      this.setAttribute("controls", "true");
      this.play();
      // 移除当前点击事件，避免后续重复触发
      this.removeEventListener("click", arguments.callee);
    });
  });
</script>

注意事项 #

• 确保海报图片的路径正确，否则会显示浏览器默认的视频占位图
• 加入this.play()是因为用户点击海报通常希望直接播放视频，仅添加控件的话还需要再点击播放按钮，体验不够流畅
• 移除点击事件是为了避免用户后续点击视频时重复执行添加控件的操作（不加也不影响功能，但更严谨）

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