多个HTML5 Video在旧浏览器及智能TV上播放异常问题求助

问题根源 #

旧浏览器、三星/LG等智能TV的媒体播放引擎资源调度能力有限，同时预加载多个视频时会抢占解码资源，导致正在播放的视频画面中断。

可行解决方法 #

1. 动态控制预加载时机，避免同时加载

初始将两个视频的preload设为none，仅在当前视频接近结束时，再给隐藏的视频设置src并触发预加载，既保证首帧预加载，又不占用过多资源。

代码示例：

const player1 = document.getElementById('player1');
const player2 = document.getElementById('player2');
let currentPlayer = player1;
let nextPlayer = player2;
let nextUrl = 'url2';

// 初始化第一个视频
currentPlayer.src = 'url1';
currentPlayer.play();

// 监听播放进度，接近结束时预加载下一个
currentPlayer.addEventListener('timeupdate', () => {
  // 剩余3秒时开始预加载，可根据设备调整时长
  if (currentPlayer.duration - currentPlayer.currentTime <= 3 && !nextPlayer.src) {
    nextPlayer.preload = 'auto';
    nextPlayer.src = nextUrl;
    nextPlayer.load(); // 主动触发预加载
  }
});

// 视频结束时切换播放器
currentPlayer.addEventListener('ended', () => {
  // 切换可见性
  currentPlayer.style.display = 'none';
  nextPlayer.style.display = 'block';
  // 播放下一个视频
  nextPlayer.play();
  // 交换播放器角色
  [currentPlayer, nextPlayer] = [nextPlayer, currentPlayer];
  // 循环切换URL，根据实际逻辑调整
  nextUrl = nextUrl === 'url2' ? 'url1' : 'url2';
  // 重置下一个播放器状态，准备下一轮预加载
  nextPlayer.src = '';
  nextPlayer.preload = 'none';
});

2. 用preload="metadata"替代auto

metadata模式仅预加载视频元数据（包括首帧），不会加载完整视频，既可以避免切换时的首帧延迟，又不会占用过多资源，适配旧设备的资源限制。

调整后的视频标签：

<video muted playsinline preload="metadata" id="player1"></video>
<video muted playsinline preload="metadata" id="player2"></video>

在需要预加载完整视频时，再动态将preload改为auto并调用load()方法。

3. 复用单个视频标签（简化方案）

如果逻辑允许，不需要两个DOM中的视频标签，用一个隐藏的内存视频对象预加载下一个视频的首帧和部分数据，切换时替换主视频的src。

代码示例：

const mainPlayer = document.getElementById('player1');
const preloadPlayer = document.createElement('video');
preloadPlayer.muted = true;
preloadPlayer.playsinline = true;
preloadPlayer.preload = 'metadata';

let currentUrl = 'url1';
let nextUrl = 'url2';

mainPlayer.src = currentUrl;
mainPlayer.play();

// 接近结束时预加载下一个视频
mainPlayer.addEventListener('timeupdate', () => {
  if (mainPlayer.duration - mainPlayer.currentTime <= 3 && preloadPlayer.src !== nextUrl) {
    preloadPlayer.src = nextUrl;
    preloadPlayer.load();
    // 等待首帧加载完成
    preloadPlayer.addEventListener('loadeddata', () => {
      // 此时已获取首帧，可随时切换
    }, { once: true });
  }
});

// 切换视频
mainPlayer.addEventListener('ended', () => {
  mainPlayer.src = nextUrl;
  mainPlayer.play();
  // 循环URL
  [currentUrl, nextUrl] = [nextUrl, currentUrl];
  // 重置预加载对象
  preloadPlayer.src = '';
});

注意事项 #

• 智能TV的浏览器引擎多基于旧版内核，尽量避免同时操作多个视频的加载逻辑
• 根据目标设备的性能，调整预加载的提前时长（比如2-5秒），确保切换时视频已准备就绪
• 避免在页面初始化时同时给多个视频设置src，旧设备无法处理并发媒体请求

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