多视频页面点击视频或外层容器触发播放/暂停功能故障求助

嘿，我懂你现在的困扰——想让页面里的多个视频，不管点视频本身还是它的外层.video容器，都能切换播放/暂停状态，但之前的脚本完全没起作用。我来帮你一步步搞定这个问题！

先聊聊你之前代码的问题 #

你写的$('video').click(function(){ this[this.paused ? 'play' : 'pause'](); });只给<video>元素绑定了点击事件，但你要的是点击外层容器也能触发；而且如果你的脚本在DOM还没完全加载好的时候就执行了，$('video')根本找不到元素，自然就无效啦。

解决方案1：jQuery版本（高效绑定+支持容器点击） #

先确保你已经正确引入了jQuery库（要在自定义脚本之前引入哦），然后用下面的代码：

$(document).ready(function() {
  // 给所有.video容器绑定点击事件
  $('.video').click(function() {
    // 找到当前容器里的video元素
    const targetVideo = $(this).find('video')[0];
    // 切换播放/暂停状态
    targetVideo[targetVideo.paused ? 'play' : 'pause']();
  });
});

这个方案的优势：

• 用$(document).ready()确保DOM加载完成后再绑定事件，不会出现找不到元素的情况
• 绑定外层容器的点击事件，不管点容器空白处还是视频本身，都会触发（事件冒泡机制）
• 每个容器只控制自己内部的视频，多个视频之间不会互相干扰

解决方案2：原生JS版本（无需依赖jQuery） #

如果你不想用jQuery，原生JS也能实现同样的效果：

// 等DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有.video容器
  const videoContainers = document.querySelectorAll('.video');
  
  videoContainers.forEach(container => {
    container.addEventListener('click', function() {
      const targetVideo = this.querySelector('video');
      // 切换播放状态
      if (targetVideo.paused) {
        targetVideo.play();
      } else {
        targetVideo.pause();
      }
    });
  });
});

额外排查点 #

如果还是没效果，你可以检查这几点：

• 确认jQuery（如果用方案1）已经正确引入，没有加载失败
• 检查视频的src路径是否正确，视频能正常加载播放
• 打开浏览器控制台看看有没有报错，比如$ is not defined（说明jQuery没加载成功）

内容的提问来源于stack exchange，提问作者Al-76