Search code examples
javascripthttp-live-streaminghls.js

HLS.js loading all child fragments at one time when using master playlist

While trying to implement HLS.js for streaming audio, I am facing this weird problem where all the fragments of the child playlist are loaded at the same time even when the audio is not playing at all. If I load the child playlist directly then it works normally i.e. it loads the first two fragments and waits for the playhead, if no audio is played it doesn't load other fragments. This simultaneously loading of all the fragment persist in master playlist only.

<!-- 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>

This is fairly the basic get started code used in the website. I just replaced the url to link to my playlist.

Screenshot: With Master Playlist

enter image description here

Screenshot: Without Master, Only Child Playlist

enter image description here

I just want the fragments to load only when required as the default behavior also with the master playlist.

Solution

  • i have your question before, but i found that it is not the hls.js problem, hls.js default buffer size is 60m ,so if your child list file is smaller than 60m, it will load all the files, you can set smaller buffer size to save the bandwidth

    /* let say set to 10m */

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