HTML中如何在按钮点击前隐藏视频预览画面

核心逻辑非常直接：默认将视频元素设置为不可见状态，监听按钮点击事件，触发交互时再显示视频并调用播放方法即可，以下是无框架通用的落地实现，兼容所有主流浏览器。

具体实现步骤 #

• 编写基础HTML结构
  给视频标签加上preload="none"属性，禁止页面初始加载时拉取视频资源，从根源避免预览帧提前显示：

<button id="playTrigger">点击播放视频</button>
<video id="targetVideo" controls width="720" preload="none" class="is-hidden">
  <source src="./your-video-file.mp4" type="video/mp4">
  当前浏览器不支持HTML5视频播放
</video>

• 编写CSS隐藏样式
  用类名控制视频显示状态，比直接写内联样式更好维护：

.is-hidden {
  /* 完全隐藏元素，不占据页面布局空间 */
  display: none;
  /* 如果需要保留视频位置，只是视觉隐藏，替换成下面这行即可 */
  /* visibility: hidden; */
}

• 编写JS交互逻辑
  绑定按钮点击事件，点击后先移除隐藏类让视频显示，再触发播放：

const playBtn = document.getElementById('playTrigger');
const video = document.getElementById('targetVideo');

playBtn.addEventListener('click', () => {
  // 显示视频
  video.classList.remove('is-hidden');
  // 触发播放
  video.play().catch(err => {
    // 捕获浏览器自动播放策略限制的报错
    console.log('播放失败，请手动点击视频控件播放', err);
  });
  // 不需要保留按钮的话，点击后直接隐藏按钮即可
  // playBtn.classList.add('is-hidden');
})

优化提示 #

不要尝试用清空poster封面、给视频盖遮罩的方式实现需求，直接隐藏整个视频元素是最稳妥的方案，不会出现浏览器加载时闪预览帧、移动端兼容异常的问题

• 如果需要淡入的顺滑效果，可以把隐藏样式改成opacity: 0搭配transition过渡属性，点击后把opacity设为1即可
• 如果是嵌入第三方平台的iframe视频，逻辑完全一致：默认给iframe加隐藏类，点击后显示iframe，同时在视频地址末尾拼接自动播放参数即可
• 不要给视频标签加autoplay属性，否则页面加载完成后会绕过按钮直接触发播放

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