时间戳

首页 > 解决方案 > 如何在 Video.js 中正确处理 HLS 流离线案例？

javascript - 如何在 Video.js 中正确处理 HLS 流离线案例？

问题描述

我在我的网络应用程序的客户端使用 Video.js 来创建必须播放 HLS 流的播放器（在所有平台上）。我从服务器接收 m3u8 文件链接并在 videoJsPlayer.src() 中使用它。playlist.m3u8 的内容如下：

#EXTM3U
#EXT-X-PLAYLIST-TYPE:EVENT
#EXT-X-ALLOW-CACHE:NO
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2500000,NAME="High"
https://.../chunklist.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=500000,NAME="Low"
https://.../chunklist.m3u8

playlist.m3u8 文件中的每个链接都指向某个 chunklist.m3u8 文件，该文件是特定带宽的播放列表。Videojs 选择 chunklist.m3u8 之一并下载它。每个 chunklist.m3u8 文件的内容如下：

#EXTM3U
#EXT-X-VERSION:3
##EXT-X-ALLOW-CACHE:NO
#EXT-X-TARGETDURATION:9
#EXT-X-MEDIA-SEQUENCE:51
#EXT-X-DISCONTINUITY-SEQUENCE:0
#EXTINF:8.333,
https://.../file.ts
#EXTINF:8.333,
https://.../file.ts
#EXTINF:8.334,
https://.../file.ts
#EXTINF:8.333,
https://.../file.ts
#EXTINF:8.333,
https://.../file.ts

在我停止流之前，这很好。我的问题是：在 Video.js 中停止 HLS 流的最佳方法是什么？我应该在 chunklist.m3u8 文件中放入什么样的内容来停止播放器？目前我正在为离线流使用 chunklist.m3u8 文件的以下内容：

#EXTM3U
#EXT-X-ALLOW-CACHE:NO
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:0
#EXT-X-MEDIA-SEQUENCE:101
#EXTINF:0.0,
https://.../file.ts (empty ts file)
#EXT-X-ENDLIST

我在 twitch.tv 上看到过这种方法，但它不适用于 Video.js。播放器开始无限循环下载空 .ts 文件。我正在阅读文档（https://datatracker.ietf.org/doc/html/rfc8216），但没有找到离线流处理示例。请帮我理解。

标签： javascriptvideovideo-streaminghttp-live-streamingvideo.js

解决方案

推荐阅读