hls 手动添加第二个 .ts 文件到播放列表

Question

我知道了

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:14
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10.416667,
index0.ts
#EXTINF:12.625000,
index1.ts
#EXTINF:8.958333,
index2.ts
#EXTINF:10.416667,
index3.ts
#EXTINF:13.666667,
index4.ts
#EXTINF:3.916667,
index5.ts
#EXTINF-X-ENDLIST

m3u8 播放列表。如果我尝试在浏览器中播放它，它运行得非常好。这是我用来播放流的网站代码

<!DOCTYPE html>
<html>

    <head>

        <title>World0</title>

    </head>
    <body>
        
        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
        <video width="400" id="video" controls></video>
        <script>
            // const src = "http://localhost:8080/final/index.m3u8" // "https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
            const src = "http://192.168.2.166:8080/final/index.m3u8"
            if(Hls.isSupported()) {
                var video = document.getElementById('video');
                var hls = new Hls();
                hls.loadSource(src);
                hls.attachMedia(video);
                hls.on(Hls.Events.MEDIA_ATTACHED, () => {
                    console.log("attached");
                })
                hls.on(Hls.Events.ERROR, (event, data) => {
                    const errorType = data.type;
                    const errorDetails = data.details;
                    const errorFatal = data.fatal;

                    console.log(errorType, errorDetails, errorFatal);
                })
                hls.on(Hls.Events.MANIFEST_PARSED,function()
                {
                    video.play();
                });
            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                video.src = src;
                video.addEventListener('canplay',function() {
                    video.play();
                });
            }
        </script>

    </body>

</html>

但现在我想再次重复上一节(index5.ts)。所以我这样做了：

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:14
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10.416667,
index0.ts
#EXTINF:12.625000,
index1.ts
#EXTINF:8.958333,
index2.ts
#EXTINF:10.416667,
index3.ts
#EXTINF:13.666667,
index4.ts
#EXTINF:3.916667,
index5.ts
#EXTINF:3.916667,
index5.ts
#EXTINF-X-ENDLIST

如您所见，我列出了 index5.ts 文件两次。所以理论上这一段应该双打。但是当我从网站转到视频播放器并跳到 1:00 标记时，通常 index5.ts 部分应该重复。它一直在加载，什么也没有发生。

Answer 1

您需要在重复之前添加一个 EXT-X-DISCONTINUITY 标签，以指示标签前面的媒体文件和后面的媒体文件之间存在不连续性。

这是因为重复片段的每次迭代之间会有时间戳不连续，而播放器希望时间戳随着播放列表的进行而递增。

有关详细信息，请参阅 https://datatracker.ietf.org/doc/html/draft-pantos-hls-rfc8216bis-08#section-4.4.4.3。

#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:14
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10.416667,
index0.ts
#EXTINF:12.625000,
index1.ts
#EXTINF:8.958333,
index2.ts
#EXTINF:10.416667,
index3.ts
#EXTINF:13.666667,
index4.ts
#EXTINF:3.916667,
index5.ts
#EXT-X-DISCONTINUITY
#EXTINF:3.916667,
index5.ts
#EXTINF-X-ENDLIST

hls 手动添加第二个 .ts 文件到播放列表

hls manually add second .ts file to playlist

video-streaming

http-live-streaming

m3u8

hls.js