如何用JavaScript让页面所有无类名/ID的video元素自动循环播放

你当前代码只作用于第一个video元素，是因为document.getElementsByTagName('video')[0]仅选取了集合里的第一个元素。移除[0]后得到的是HTMLCollection（元素集合），不能直接对集合设置属性或绑定事件，必须遍历集合里的每个video元素逐一处理。

修改后的代码如下：

// 获取页面上所有video元素
const allVideos = document.getElementsByTagName('video');

// 遍历每个video元素进行设置
for (let i = 0; i < allVideos.length; i++) {
  const currentVideo = allVideos[i];
  
  // 优先使用原生loop属性（如果浏览器支持）
  if (typeof currentVideo.loop === 'boolean') {
    currentVideo.loop = true;
  } else {
    // 不支持loop属性时，通过监听ended事件手动实现循环
    currentVideo.addEventListener('ended', function() {
      this.currentTime = 0;
      this.play();
    }, false);
  }
  
  // 启动视频播放
  currentVideo.play();
}

关键说明： #

• getElementsByTagName('video')返回的是包含所有video元素的类数组对象，必须通过循环（for/forEach等）逐个访问内部元素。
• 保留了原代码的兼容性逻辑：优先使用浏览器原生loop属性，不支持时再通过事件监听模拟循环。
• 如果页面中的video元素是动态加载（比如通过JS新增），需要在元素加载完成后再执行这段脚本，或者使用MutationObserver监听DOM变化来自动处理新添加的视频。

内容的提问来源于stack exchange，提问作者Ashley Stewart