hls.js设置currentTime不生效 如何让视频从指定X秒开始播放

设置指定时间开播不生效是两个问题叠加导致的：

• Hls.Events.MANIFEST_PARSED触发时机过早：该事件仅代表m3u8清单文件解析完成，此时视频元数据、对应时间点的媒体分片都未加载完成，video元素不支持seek操作，赋值currentTime会被直接忽略。
• 标签自带的autoplay属性会在媒体资源可播放时直接从0秒启动，和自定义seek逻辑冲突。

调整逻辑顺序：等媒体元数据加载完成、支持seek操作时，先设置currentTime到指定位置，再触发播放，完整可运行代码如下：

<html>
<head>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
  <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
</head>
<body>
  <video id="video" width="100%" height="100%" controls class="player">
    <track src="subtitles" label="English" kind="subtitles" srclang="en" default>
  </video>
  <script>
    const video = document.getElementById('video');
    const startTime = 55;
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource('https://vz-f68ee764-984.b-cdn.net/73e38955-bf02-4129-84b8-981f596a5fe0/3840x2160/video.m3u8');
      hls.attachMedia(video);

      // 元数据加载完成后才可以执行seek
      video.addEventListener('loadedmetadata', () => {
        video.currentTime = startTime;
        video.play();
      });
    }
  </script>
</body>
</html>

如果遇到大视频、网络差的场景seek偶发失效，可以加seeked事件监听做兜底，确认跳转到指定时间后再播放：

// 放在hls初始化逻辑后即可
let hasSeeked = false;
video.addEventListener('seeked', () => {
  if (!hasSeeked) {
    hasSeeked = true;
    video.play();
  }
});

注意：修复后的代码已经移除了video标签上的autoplay属性，不要加回该属性，否则会绕过自定义的seek逻辑从0秒开播。

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