使用主播放列表时，HLS.js 一次加载所有子片段

Posted 2023-03-07

【中文标题】使用主播放列表时，HLS.js 一次加载所有子片段

【英文标题】：HLS.js loading all child fragments at one time when using master playlist

【发布时间】：2019-11-15 15:54:47

【问题描述】：

在尝试为流式音频实现 HLS.js 时，我遇到了一个奇怪的问题，即使音频根本没有播放，子播放列表的所有片段也会同时加载。如果我直接加载子播放列表，那么它可以正常工作，即它加载前两个片段并等待播放头，如果没有播放音频，它不会加载其他片段。 这种同时加载所有片段的方式仅保留在主播放列表中。

<!-- Or if you want a more recent canary version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
<audio id="audio" controls></audio>
<script>
    var audio = document.getElementById('audio');
    if(Hls.isSupported()) 
        var hls = new Hls();
        hls.loadSource('https://neplay-test.s3.amazonaws.com/hls/master.m3u8');
        hls.attachMedia(audio);
        hls.on(Hls.Events.MANIFEST_PARSED,function() 
            // audio.play();
        );
    
    // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
    // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
    // This is using the built-in support of the plain video element, without using hls.js.
    // Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
    // white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
    else if (audio.canPlayType('application/vnd.apple.mpegurl')) 
        audio.src = 'https://neplay-test.s3.amazonaws.com/hls/master.m3u8';
        audio.addEventListener('loadedmetadata',function() 
            // audio.play();
        );
    
</script>

这是网站中使用的基本入门代码。我刚刚替换了链接到我的播放列表的 url。

屏幕截图：带有主播放列表

截图：没有大师，只有孩子播放列表

我只希望片段仅在需要时加载，作为主播放列表的默认行为。

【参考方案1】：

我之前有你的问题，但我发现这不是 hls.js 的问题， hls.js 默认缓冲区大小为 60m，所以如果你的子列表文件小于 60m，它会加载所有文件，你可以设置更小的缓冲区大小以节省带宽

/* 假设设置为 10m */

新 Hls(maxBufferSize: 10 * 1000 * 1000);