如何用JavaScript实现网页视频结束后隐藏视频并弹出联系表单

你原有代码存在一处基础bug：getElementsByClassName返回的是类数组的元素集合，并非单个DOM节点，直接在集合上调用addEventListener会触发类型错误，需要先取到目标视频节点再绑定事件。
完整实现分3步走：

• 先写好联系表单弹窗的基础结构，默认设置为隐藏状态，同时搭配半透明遮罩层提升弹窗体验
• 修正视频ended事件的绑定逻辑，在原有隐藏视频的逻辑后，追加弹窗展示的代码
• 补充弹窗关闭、表单提交的配套交互逻辑

可直接复用的代码示例 #

HTML结构部分 #

<!-- 整页展示的视频元素 -->
<video class="hideVideo" controls autoplay style="width: 100vw; height: 100vh; object-fit: cover;">
  <source src="your-video-file.mp4" type="video/mp4">
  您的浏览器不支持视频播放
</video>

<!-- 联系表单弹窗 初始隐藏 -->
<div class="contact-modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; background: #fff; padding: 2rem; border-radius: 8px; width: 90%; max-width: 480px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);">
  <h3 style="margin-top: 0; font-size: 1.5rem;">留下您的联系方式</h3>
  <form>
    <div style="margin-bottom: 1rem;">
      <label style="display: block; margin-bottom: 0.5rem;">姓名</label>
      <input type="text" name="name" required style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
    </div>
    <div style="margin-bottom: 1rem;">
      <label style="display: block; margin-bottom: 0.5rem;">联系电话/邮箱</label>
      <input type="text" name="contact" required style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;">
    </div>
    <div style="margin-bottom: 1.5rem;">
      <label style="display: block; margin-bottom: 0.5rem;">需求说明</label>
      <textarea name="remark" rows="3" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box;"></textarea>
    </div>
    <button type="submit" style="padding: 0.6rem 1.2rem; background: #165DFF; color: #fff; border: none; border-radius: 4px; cursor: pointer;">提交信息</button>
    <button type="button" class="close-btn" style="padding: 0.6rem 1.2rem; background: #f5f5f5; border: none; border-radius: 4px; cursor: pointer; margin-left: 0.5rem;">关闭</button>
  </form>
</div>

<!-- 弹窗遮罩层 初始隐藏 -->
<div class="modal-mask" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 998;"></div>

JavaScript逻辑部分 #

// 等DOM全部加载完成再执行，避免获取不到元素
document.addEventListener('DOMContentLoaded', () => {
  // 获取需要操作的DOM节点
  const video = document.getElementsByClassName('hideVideo')[0];
  const modal = document.getElementsByClassName('contact-modal')[0];
  const mask = document.getElementsByClassName('modal-mask')[0];
  const closeBtn = document.getElementsByClassName('close-btn')[0];
  const form = modal.querySelector('form');

  // 视频播放结束的回调
  const handleVideoEnd = () => {
    // 原有隐藏视频逻辑
    video.style.display = 'none';
    // 展示弹窗和遮罩
    modal.style.display = 'block';
    mask.style.display = 'block';
  }

  // 关闭弹窗的通用方法
  const closeModal = () => {
    modal.style.display = 'none';
    mask.style.display = 'none';
  }

  // 绑定事件
  video.addEventListener('ended', handleVideoEnd, false);
  closeBtn.addEventListener('click', closeModal, false);
  // 点击遮罩也可以关闭弹窗
  mask.addEventListener('click', closeModal, false);
  // 表单提交逻辑，可根据自己的后端接口调整
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    // 这里替换成实际的表单提交请求即可
    console.log('收集到的表单信息：', Object.fromEntries(formData.entries()));
    alert('提交成功，我们会尽快联系您');
    form.reset();
    closeModal();
  })
})

注意：如果你的页面后续会添加多个带hideVideo类名的视频，需要遍历getElementsByClassName返回的集合，给每个视频节点单独绑定事件，单视频场景下取第一个节点即可。弹窗样式可以根据自己站点的设计风格自由调整，上面的样式仅做最小可用参考。

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