移动端网站视频源切换不持久问题求助（Chrome安卓端限制）

看起来你碰到了Chrome移动端自动播放政策和视频源切换的典型冲突，我来帮你梳理下问题所在，然后给出可行的解决方案。

先分析下你两个方案的核心问题：

方案V1的问题 #

你替换了<source>元素，但浏览器并不会自动重新加载新的视频源——因为视频元素已经完成初始化，仍在使用之前缓存的媒体资源。所以即使你替换了source标签，不主动触发重新加载的话，视频还是会播放原来的内容。

方案V2的问题 #

直接修改src属性在桌面端能生效，但移动端Chrome的自动播放政策更严格：动态修改src后，即使视频是静音状态，也需要明确触发播放动作，而且最好等视频加载完成后再调用play()，否则可能因为视频资源未就绪而播放失败。

可行的解决方案 #

结合两者的优点，我们需要做到：

1. 确保视频始终保持muted、autoplay、loop属性（满足Chrome自动播放的核心要求）
2. 切换源后强制视频重新加载资源
3. 在视频加载完成后触发播放（兼容移动端的严格政策）

方案一：修改source后触发load+play #

可以沿用你V1的HTML结构，但补充关键的加载和播放逻辑：

<video id="overlayVideo" autoplay muted loop>
  <source id="overlayVideoSrc" type="video/mp4" src="初始视频地址.mp4"/>
</video>

// 封装切换视频源的函数
function switchVideoSource(newSrc) {
  const video = document.getElementById('overlayVideo');
  const oldSource = document.getElementById('overlayVideoSrc');
  
  // 创建新的source元素
  const newSource = document.createElement('source');
  newSource.id = 'overlayVideoSrc';
  newSource.src = newSrc;
  newSource.type = 'video/mp4';
  
  // 替换旧source标签
  oldSource.replaceWith(newSource);
  
  // 强制视频加载新资源，然后触发播放
  video.load();
  // 由于已设置muted，移动端Chrome允许自动播放，这里的play()应该能生效
  video.play().catch(err => {
    // 万一播放失败，可在这里做降级处理（比如显示封面图）
    console.error('视频播放失败:', err);
  });
}

// 调用示例
switchVideoSource('index/RES/newVideo.mp4');

方案二：直接修改src并监听加载完成事件 #

如果你更倾向于V2的单src结构，可以通过监听视频的loadeddata事件，确保资源就绪后再触发播放：

<video id="overlayVideo" src="初始视频地址.mp4" autoplay muted loop></video>

function switchVideoSource(newSrc) {
  const video = document.getElementById('overlayVideo');
  
  // 先移除之前的事件监听（避免重复绑定导致多次触发）
  video.removeEventListener('loadeddata', onVideoLoaded);
  
  // 修改视频源
  video.src = newSrc;
  
  // 定义加载完成后的播放逻辑
  function onVideoLoaded() {
    video.play().catch(err => {
      console.error('视频播放失败:', err);
    });
    // 播放完成后移除监听，避免后续切换时重复执行
    video.removeEventListener('loadeddata', onVideoLoaded);
  }
  
  // 绑定加载完成事件
  video.addEventListener('loadeddata', onVideoLoaded);
  // 强制加载新资源
  video.load();
}

// 调用示例
switchVideoSource('index/RES/newVideo.mp4');

关键注意事项 #

• 必须保留muted属性：Chrome移动端的自动播放政策明确要求，非用户触发的播放必须是静音状态，否则play()会被浏览器阻止。
• 避免重复绑定事件：如果需要多次切换视频源，一定要移除之前的事件监听，防止同一逻辑被多次执行。
• 捕获play()的异常：虽然设置了muted，但极端情况（比如用户手动关闭了网站的自动播放权限）下play()仍可能失败，需要捕获并处理异常。

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