在现代网页设计中，为了优化用户体验和页面加载性能，我们常常需要在用户明确意图之前隐藏某些内容，尤其是占用资源较多的视频元素。例如，当用户需要点击一个按钮才能开始观看视频时，预先显示视频的预览画面可能是不必要的，甚至会分散用户的注意力。本教程将指导您如何通过html、css和javascript的协同作用，实现视频内容的按需显示，即在用户点击特定按钮后才显示视频。
实现这一功能的核心思路是：首先，利用CSS将视频元素默认设置为不可见状态；然后，通过JavaScript监听用户对特定按钮的点击事件，一旦事件触发，就动态地修改视频元素的CSS样式，使其变为可见，从而允许视频播放。
1. HTML 结构搭建
首先，我们需要在HTML中定义视频元素和一个用于触发显示操作的按钮。为方便JavaScript操作，请确保视频元素具有一个唯一的 id。
- id="myVideo"：视频元素的唯一标识符，JavaScript将通过此ID来操作该元素。
- controls：显示视频播放控制器，如播放/暂停按钮、进度条等。
- preload="none"：建议浏览器不要预加载视频。这对于初始隐藏的视频尤其重要，可以节省带宽并提高页面初始加载速度。
2. CSS 初始隐藏
接下来，使用CSS将视频元素默认隐藏。最常用的方法是设置 display 属性为 none。
您可以将这段CSS代码放置在
标签内的视频按需显示示例
点击下方按钮来显示并播放视频。