ChatGPT 问答00001 hls.js 如何跳转到指定时间
hls.js是一个流媒体播放器库,它可以在浏览器中实现 HTTP Live Streaming (HLS) 播放。要在 hls.js 中跳转到指定时间,请遵循以下步骤:
- 在声明
Hls
对象之前,将enableWorker
属性设置为 false。这样可以禁用 hls.js 的 web worker 功能,以便使用更精确的跳转操作。例如:
Hls.DefaultConfig.enableWorker = false;
- 加载
video
元素和Hls
对象,并将其绑定在一起。例如:
var video = document.getElementById('video');
var hls = new Hls();
hls.attachMedia(video);
- 监听
Hls.Events.MANIFEST_PARSED
事件,以便在启动后立即跳转到指定时间。在此事件中,我们可以调用video.currentTime
属性来设置当前播放时间。例如:
hls.on(Hls.Events.MANIFEST_PARSED, function() {
// 跳转到第30秒
video.currentTime = 30;
});
请注意,这种方法可能会在视频还没有加载完全时失败。你可以先等待 loadedmetadata
或 canplaythrough
事件再进行跳转。
最后,在 hls.js 完成加载并绑定到 video
元素后,可以通过调用 hls.loadSource()
方法来加载 HLS 视频源。
完整的代码示例如下:
<video id="video"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
// 禁用 worker
Hls.DefaultConfig.enableWorker = false;
var video = document.getElementById('video');
var hls = new Hls();
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
// 跳转到第30秒
video.currentTime = 30;
});
// 加载视频源
hls.loadSource('path/to/video.m3u8');
</script>
为梦想不止不休!