如何重现Chrome视频节能暂停报错及排查原因与解决方法？

问题概述 #

我们的企业项目采用Angular+Clappr实现直播流自动启停功能，服务支持最高3000同时在线用户，已通过15000并发测试。但部分使用**Chrome 111.0.5563.148（Windows 64位）**的用户反馈直播流会中途误判为结束而停止，控制台报错如下：

Uncaught (in promise) DOMException: The play() request was interrupted because video-only background media was paused to save power.

尝试开启Chrome内存/节能模式、Windows系统节能选项均无法重现该问题，且官方链接未提供对应解决方案。以下针对三个核心需求给出具体方案：

1. 可靠的报错重现方法 #

需严格匹配以下条件才能触发该问题：

• 使用**纯净的Chrome 111.0.5563.148（Windows 64位）**版本（建议用隐身模式或全新配置文件，避免插件干扰）
• 播放完全无音频的直播流（可通过媒体分析工具确认无音轨）
• 将浏览器窗口最小化或切换到后台，保持至少20分钟不操作
• 设备为笔记本电脑，处于未插电状态，并将Windows电源计划设置为「节能」模式
• 在Chrome设置中开启「节能模式」，设置为「始终」启用
• 期间让系统处于轻度空闲状态，避免唤醒Chrome的活跃检测

2. 报错的真实诱因 #

• Chrome 111版本针对无音频背景媒体新增了激进的节能策略：当无音频视频处于后台、系统处于电池节能状态时，Chrome会自动暂停视频以节省电量
• Clappr播放器未区分「用户主动暂停」和「Chrome节能暂停」，将后者误判为直播流结束，从而触发自动停止逻辑
• 该问题仅存在于Chrome 111.0.5563.148版本，属于该版本的特定策略或bug，后续Chrome版本已调整相关逻辑

3. 避免视频停止的解决方案 #

方案一：为直播流添加静音音轨（最有效） #

Chrome的节能策略仅针对完全无音轨的视频，为直播流添加一条持续的静音音轨后，媒体会被识别为带音频内容，不会触发后台暂停。此方法无需修改前端代码，从根源解决问题。

方案二：修改Clappr播放器逻辑，区分暂停类型 #

在Angular中监听Clappr的暂停事件，判断是否为Chrome节能触发的暂停，避免误判流结束：

import { Component, OnInit } from '@angular/core';
import Clappr from 'clappr';

@Component({
  selector: 'app-live-player',
  templateUrl: './live-player.component.html',
})
export class LivePlayerComponent implements OnInit {
  player: any;

  ngOnInit(): void {
    this.player = new Clappr.Player({
      source: 'your-live-stream-url',
      parentId: '#player-container',
      // 其他配置项
    });

    // 监听播放器暂停事件
    this.player.on(Clappr.Events.PLAYER_PAUSE, () => {
      const isChrome111 = navigator.userAgent.includes('Chrome/111.0.5563.148');
      const isBackground = document.hidden;

      // 判断是否为Chrome节能导致的暂停
      if (isChrome111 && isBackground) {
        // 避免触发自动停止逻辑，尝试恢复播放
        setTimeout(() => {
          this.player.play().catch(err => {
            console.warn('节能暂停恢复失败:', err);
          });
        }, 1000);
      }
    });
  }
}

方案三：引导用户调整设置 #

告知受影响用户：

• 关闭Chrome的「节能模式」（设置→系统和性能→节能模式→选择「从不」）
• 将直播标签页固定，Chrome对固定标签页的后台媒体暂停策略更宽松

方案四：升级Chrome版本 #

建议用户升级到Chrome 112及以上版本，该问题在后续版本中已被修复或调整。

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