网页背景视频随机切换报错Uncaught DOMException，求技术支援

错误原因 #

你的video标签设置了autoplay属性，页面加载后浏览器会立即尝试播放初始的<source>视频。与此同时，JS代码修改了source的地址并调用video.load()重新加载视频，这会直接中断浏览器正在进行的播放请求，从而触发这个DOMException错误。

解决方案 #

我们可以通过两种方式避免这个冲突：

方案1：先中断原有播放请求，再加载新视频 #

保留原有HTML结构，修改JS代码，先暂停视频并重置状态，再切换源并在加载完成后手动播放：

<video class="my-video" id="myVideo" loop muted preload="none" playsinline>
  <source src="videolink1.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

const video = document.getElementById("myVideo");
const videoSources = [
  'https://videolink1.mp4',
  'https://videolink2.mp4'
];

function changeVideoSourceRandomly() {
  // 先暂停视频并重置播放位置，中断浏览器的自动播放请求
  video.pause();
  video.currentTime = 0;

  const randomIndex = Math.floor(Math.random() * videoSources.length);
  const randomSource = videoSources[randomIndex];
  const source = video.querySelector('source');
  source.src = randomSource;

  video.load();
  // 视频加载完成后再触发播放
  video.addEventListener('loadeddata', () => {
    video.play();
  }, { once: true }); // 确保监听只执行一次
}

changeVideoSourceRandomly();

方案2：动态创建source元素，避免初始自动播放 #

移除HTML中的初始<source>，由JS动态创建并设置源，从根源避免浏览器自动播放和手动加载的冲突：

<video class="my-video" id="myVideo" loop muted preload="none" playsinline>
  Your browser does not support the video tag.
</video>

const video = document.getElementById("myVideo");
const videoSources = [
  'https://videolink1.mp4',
  'https://videolink2.mp4'
];

function changeVideoSourceRandomly() {
  const randomIndex = Math.floor(Math.random() * videoSources.length);
  const randomSource = videoSources[randomIndex];

  // 创建新的source元素并设置属性
  const source = document.createElement('source');
  source.src = randomSource;
  source.type = 'video/mp4';

  // 清空video内原有内容，添加新的source
  video.innerHTML = '';
  video.appendChild(source);

  // 加载并播放视频
  video.load();
  video.play();
}

changeVideoSourceRandomly();

注意事项 #

因为你的视频已经设置了muted属性，符合浏览器自动播放策略的要求，所以手动调用video.play()不会被拦截。

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