本文教你使用原生 html、css 和 javascript（无需框架）实现“点击按钮显示视频，再点一次隐藏”的交互效果，代码简洁易懂，适合零基础初学者快速上手。
本文教你使用原生 html、css 和 javascript（无需框架）实现“点击按钮显示视频，再点一次隐藏”的交互效果，代码简洁易懂，适合零基础初学者快速上手。
在网页开发中，“点击弹出视频”是一个常见需求——比如展示产品演示、教程片段或宣传短片。虽然 Bootstrap 等框架能快速实现模态框（Modal），但对初学者而言，理解底层逻辑更重要。下面我们将完全不依赖第三方库，仅用原生 HTML、CSS 和少量 JavaScript，打造一个轻量、可控、语义清晰的视频弹窗功能。
✅ 核心思路
- 用
- 用 作为遮罩层与容器，初始设为 display: none；
- 使用
- JavaScript 控制 classList.toggle() 或 style.display 切换可见状态；
- 点击模态框背景或关闭按钮均可关闭视频，提升用户体验。
? 完整可运行代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>点击弹出视频</title> <style> /* 模态框基础样式：全屏遮罩 + 居中卡片 */ .video-modal { display: none; /* 默认隐藏 */ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 1000; justify-content: center; align-items: center; } .video-modal.active { display: flex; /* 激活时显示为 flex */ } .video-container { background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); max-width: 90vw; max-height: 80vh; } .video-container video { width: 100%; height: auto; display: block; } .close-btn { position: absolute; top: 16px; right: 16px; background: rgba(0, 0, 0, 0.7); color: white; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: background 0.2s; } .close-btn:hover { background: rgba(0, 0, 0, 0.9); } /* 可选：按钮样式 */ .trigger-btn { padding: 10px 24px; font-size: 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background 0.2s; } .trigger-btn:hover { background: #0056b3; } </style> </head> <body> <!-- 触发按钮 --> <button class="trigger-btn" id="toggleVideoBtn">▶ 播放演示视频</button> <!-- 视频模态框（含关闭按钮） --> <div class="video-modal" id="videoModal"> <div class="video-container"> <button class="close-btn" id="closeModalBtn">×</button> <video controls preload="metadata"> <source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video> </div> </div> <script> const modal = document.getElementById('videoModal'); const btn = document.getElementById('toggleVideoBtn'); const closeBtn = document.getElementById('closeModalBtn'); // 点击按钮：切换模态框显隐 btn.addEventListener('click', () => { modal.classList.toggle('active'); // 可选：视频播放/暂停同步（防止重复点击导致音频叠加） const video = modal.querySelector('video'); if (modal.classList.contains('active')) { video.play().catch(e => console.warn("自动播放被阻止：", e)); } else { video.pause(); } }); // 点击关闭按钮或模态框背景（非视频区域）关闭 closeBtn.addEventListener('click', () => { modal.classList.remove('active'); modal.querySelector('video').pause(); }); modal.addEventListener('click', (e) => { if (e.target === modal) { // 点击的是遮罩层本身，而非内部元素 modal.classList.remove('active'); modal.querySelector('video').pause(); } }); // 支持 Esc 键关闭 document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('active')) { modal.classList.remove('active'); modal.querySelector('video').pause(); } }); </script> </body> </html>⚠️ 注意事项与最佳实践
- 视频资源：请将 src 替换为你自己的视频地址（建议使用 .mp4 格式以保证兼容性）；若为本地文件，请确保路径正确（如 ./videos/demo.mp4）；
- 自动播放限制：现代浏览器禁止无用户交互的自动播放（尤其带声音的视频）。本例中 video.play() 在用户点击后触发，符合策略，但仍建议添加 .catch() 处理异常；
- 移动端适配：当前 CSS 已通过 max-width/max-height 和 vw/vh 单位适配响应式，可放心用于手机端；
- 无障碍访问：可进一步添加 aria-hidden、role="dialog" 及焦点管理（如 focus() 回到按钮），但本例聚焦基础功能，保持简洁；
- 性能提示：未播放时
✅ 总结
你已掌握一种轻量、可定制、无依赖的视频弹窗实现方式。它不依赖 Bootstrap 或 jQuery，所有逻辑透明可控，便于后续扩展（例如添加标题、字幕、多视频切换等）。作为前端入门的第一步，这种“动手即见效果”的实践，正是建立信心与理解 DOM 交互本质的关键。下一步，不妨尝试为视频添加封面图、控制播放进度，或接入 YouTube/Vimeo 嵌入 iframe —— 路，就从这一行 modal.classList.toggle('active') 开始。
