HTML/CSS/JS新手求助：点击按钮实现视频弹出与隐藏的方法

下面是针对纯新手的完整实现方案，分三步编写，每一步都简单易懂：

1. HTML 结构 #

先搭建页面基础元素：一个控制按钮，以及要显示/隐藏的视频。给每个元素添加唯一id，方便后续用JS操作。

<button id="toggleVideoBtn">点击显示/隐藏视频</button>
<video id="myVideo" class="hidden" src="你的视频文件路径.mp4" width="600" controls>
  你的浏览器不支持video标签
</video>

• controls属性让视频自带播放、暂停等控制按钮
• 初始给视频加hidden类，让它默认处于隐藏状态

2. CSS 样式 #

简单设置样式让页面更直观，核心是定义hidden类的隐藏规则：

#toggleVideoBtn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 20px;
}

#myVideo {
  border: 1px solid #ccc;
}

.hidden {
  display: none;
}

3. JavaScript 逻辑 #

给按钮绑定点击事件，每次点击切换视频的hidden类，实现显示/隐藏的切换：

// 获取按钮和视频元素
const toggleBtn = document.getElementById('toggleVideoBtn');
const videoElement = document.getElementById('myVideo');

// 给按钮添加点击事件
toggleBtn.addEventListener('click', function() {
  // 切换视频的hidden类 - 有就移除，没有就添加
  videoElement.classList.toggle('hidden');
});

• classList.toggle()是JS专门用来切换类的方法，完美适配这种"点击切换状态"的场景
• 不需要写复杂的判断逻辑，一行代码就能完成显示/隐藏的切换

注意事项 #

• 把src="你的视频文件路径.mp4"替换成你自己的视频文件地址，可以是本地文件路径，也可以是在线视频链接
• 如果担心视频格式不兼容，可以在video标签里添加多个<source>标签，示例：

<video id="myVideo" class="hidden" width="600" controls>
  <source src="你的视频文件路径.mp4" type="video/mp4">
  <source src="你的视频文件路径.webm" type="video/webm">
  你的浏览器不支持video标签
</video>

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