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

如何解决hls 手动将第二个 .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-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,index5.ts
#EXTINF:3.916667,index5.ts
#EXTINF-X-ENDLIST

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

解决方法

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

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

有关详细信息，请参阅 https://tools.ietf.org/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