Express.js视频播放APP在iOS端无法续播及进度条失效问题求助

问题根源 #

iOS Safari 对 HTML5 Video 有特殊行为限制：

• 设置 currentTime 必须等视频元数据加载完成（触发 loadedmetadata 事件），否则会被浏览器直接忽略
• 无用户交互时，自动播放会被系统限制
• 你的代码在设置视频 src 后立即设置 currentTime，此时视频还未加载元数据，导致续播逻辑失效

修复步骤 #

1. 先存储需要恢复的播放进度，等待视频元数据加载完成后再应用
2. 监听 loadedmetadata 事件，确保进度设置时机正确
3. 适配 iOS 自动播放限制，通过用户交互触发续播

修改后的代码 #

// 新增变量存储需要恢复的播放进度
let restoreTime = 0;

fetch("/progress", { keepalive: false })
  .then((response) => response.json())
  .then((json) => {
    let found = false;
    for (var x = 0; x < playlist.length; x++) {
      if (playlist[x].name === json.now_playing) {
        vidNow = x;
        // 先存储进度，再加载视频
        restoreTime = json.current_duration;
        vidPlay(vidNow, true);
        found = true;
        break;
      }
    }
    if (!found && vidNow == 0) {
      vidPlay(0, true);
    }
  });

var vidStart = true,
vidPlay = (idx, nostart) => {
  vidNow = idx;
  vidStart = nostart ? false : true;
  video.src = encodeURI(playlist[idx]["src"]);
  
  // 移除旧监听避免重复绑定
  video.removeEventListener('loadedmetadata', onVideoMetadataLoaded);
  // 添加元数据加载完成监听
  video.addEventListener('loadedmetadata', onVideoMetadataLoaded);

  for (let i in playlist) {
    if (i == idx) {
      playlist[i]["row"].classList.add("now");
    } else {
      playlist[i]["row"].classList.remove("now");
    }
  }
};

// 元数据加载完成后再设置播放进度
function onVideoMetadataLoaded() {
  if (restoreTime > 0) {
    video.currentTime = restoreTime;
    vSeek.value = restoreTime;
    // iOS 下自动播放需用户交互，可提示手动点击或在已有交互时尝试播放
    // if (vidStart !== false) {
    //   video.play().catch(err => console.log("自动播放失败，请手动点击播放"));
    // }
    restoreTime = 0;
  }
}

额外注意事项 #

• 确保 Express 后端支持范围请求（Range Requests），需返回 Accept-Ranges: bytes 响应头，iOS Safari 依赖该特性实现进度拖动
• 检查视频编码是否兼容 iOS，推荐使用 H.264 编码格式

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