Chrome中jPlayer报错play()被pause()中断的解决方法问询

• Chrome控制台报错：

  Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

• 使用停更多年的jPlayer 2.9.2，无法替换库
• 尝试用Promise处理播放逻辑失败，报错Uncaught TypeError: playPromise.then is not a function，原因是$jPlayer.jPlayer("play")不返回Promise
• 切换播放列表时自动播放异常：调用.jp-play点击事件，首曲无法播放；调换代码顺序后，歌曲仅播放1秒即停止，确认与Chrome自动播放政策相关
• 可修改jPlayer源码，寻求解决办法

1. 让play方法返回Promise #

找到jPlayer中处理play命令的代码块（通常在_doPlay或命令处理的switch分支里），修改为返回媒体元素的play() Promise：

// 找到类似如下的代码段：
case "play":
  if(this.status.paused) {
    // 替换原有this.element.media.play();为以下代码
    const playPromise = this.element.media.play();
    if(playPromise) {
      playPromise.catch(e => {
        // 捕获自动播放被阻止的错误，更新jPlayer状态
        this.status.paused = true;
        this._updateInterface();
      });
      // 返回Promise给调用方
      return playPromise;
    }
  }
  break;

2. 解决播放/暂停冲突导致的中断错误 #

找到jPlayer的_setMedia方法，调整自动播放逻辑，确保媒体就绪后再触发播放：

this._setMedia = function(media) {
  // 保留原有setMedia逻辑...
  // 若开启autoplay，改为在媒体就绪后执行播放
  if(this.options.autoplay) {
    this.element.media.addEventListener('canplay', () => {
      const playPromise = this.element.media.play();
      playPromise.catch(e => {
        // 自动播放失败时更新状态
        this.status.paused = true;
        this._updateInterface();
      });
    }, {once: true}); // 事件仅触发一次
  }
};

3. 修复播放列表切换的自动播放问题 #

替换播放列表切换时直接模拟点击play的代码，改为等待媒体就绪后再尝试播放：

// 替换原有$('.jp-play').click();为以下代码
const currentTrack = playlist[current];
$jPlayer.jPlayer("setMedia", currentTrack);
// 监听媒体就绪事件，就绪后尝试播放
$jPlayer.one($.jPlayer.event.canplay, () => {
  const playPromise = $jPlayer.jPlayer("play");
  if(playPromise) {
    playPromise.catch(() => {
      // 自动播放失败时切换为暂停UI
      $('.jp-pause').removeClass('jp-pause').addClass('jp-play');
    });
  }
});

4. 全局捕获自动播放错误 #

在jPlayer初始化逻辑中，给媒体元素添加play错误监听，避免控制台抛出未处理的Promise错误：

// 在jPlayer初始化代码中添加这段监听
this.element.media.addEventListener('play', e => {
  if(e.target.play) {
    e.target.play().catch(err => {
      // 仅处理自动播放被阻止的错误，不干扰用户主动触发的播放
      if(err.name === 'NotAllowedError' || err.name === 'AbortError') {
        this.status.paused = true;
        this._updateInterface();
      }
    });
  }
});

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