使用HlsJS加载m3u8视频时首次加载自动播放无法暂停的问题

我在Web应用中使用Hls.js播放m3u8视频，但首次加载时，无论是否设置autoplay属性，视频都会自动播放，期望加载时视频处于停止状态。

我的代码 #

JavaScript代码：

const videoElement = document.getElementById(<unique-id>)

const hls = new Hls()
hls.loadSource(src)
hls.attachMedia(videoElement)

hls.on(Hls.Events.MEDIA_ATTACHED, function () {
    console.log('media attached')
})

hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
})

hls.on(Hls.Events.MANIFEST_LOADED, function () {
})

注：使用的Hls.js文件版本为1.4.3

HTML视频标签：

<video
  id={uniqueKey}
  muted={muted}
  loop={loop}
  height='100%'
  width='100%'
  playsInline
/>

我还尝试添加事件监听来停止视频，但并未生效：

videoElement.addEventListener('canplay', () => {
videoElement.pause()
})

解决方法 #

1. 利用Hls.js的MANIFEST_PARSED事件暂停视频

这是最可靠的方式，这个事件是Hls.js解析完m3u8清单、确认媒体资源就绪后触发的，在这里调用pause()能精准拦截自动播放：

hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
    videoElement.pause();
});

2. 显式关闭autoplay

虽然没设置autoplay属性，但部分浏览器或Hls.js内部逻辑可能默认开启自动播放，直接在video标签或JS中强制关闭：

• HTML标签修改：

<video
  id={uniqueKey}
  muted={muted}
  loop={loop}
  height='100%'
  width='100%'
  playsInline
  autoplay="false"
/>

• JavaScript设置：

videoElement.autoplay = false;

3. 监听play事件强制暂停

如果上面的方法仍无效，可以监听视频的play事件，一旦触发就立即暂停，同时设置once: true避免拦截后续手动播放：

videoElement.addEventListener('play', () => {
    videoElement.pause();
}, { once: true });

原因说明 #

之前用canplay事件无效，是因为这个事件触发时Hls.js可能还没完成媒体流的初始化，此时调用pause()无法阻止后续Hls.js触发的播放动作。而MANIFEST_PARSED是Hls.js层面的关键就绪事件，在这里操作能准确覆盖自动播放逻辑。

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