Is there any way to Stop HLS.js Video Preloading?

Tech QnA
1

I tried adding the preload attribute with a value of none to the video tag but, it doesn’t stop the hls.js Library from preloading from the video.
How can I stop the preloading of hls.js videos?

1 Like
2

Yes, there are to ways listed below, you can try any.

  1. To stop HLS.js video preloading, you can use the hls.stopLoad() method. This method stops the current video load and removes any data that has been buffered.
if (Hls.isSupported()) {
  var hls = new Hls();
  hls.loadSource('your-video.m3u8');
  hls.attachMedia(yourVideoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    // stop video preloading when the manifest has been parsed
    hls.stopLoad();
  });
}
  1. Use the autoStartLoad configuration option and set it to false to stop hls.js from preloading video content. By selecting this option, the initial playlist will not automatically load when the Hls.js instance is formed. After that, you can manually decide when the video will begin to load.

Here is the example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stop Preloading with hls.js</title>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>

<video id="video" controls></video>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var video = document.getElementById('video');
    var hls = new Hls({
      autoStartLoad: false // Set to false to disable automatic loading
    });

    // Attach hls.js to the video element
    hls.attachMedia(video);

    // Manually start loading when needed
    // For example, you can trigger this on a user action like a button click
    document.getElementById('startLoadingButton').addEventListener('click', function () {
      hls.startLoad(0); // 0 is the start position, adjust as needed
    });
  });
</script>

<button id="startLoadingButton">Start Loading</button>

</body>
</html>

In this instance:

To prevent automatic loading, use the autoStartLoad: false configuration option when launching the HLS instance.

The video is manually loaded using the hls.startLoad(0) method. This function can be called in response to user input, like clicking a button.

You can successfully stop hls.js from automatically preloading the video when the page loads by deciding when to begin loading the video material. As necessary, modify the example to fit your particular use case.

3

How can we increase the preloaded buffer size?

4

For that you can use the hls.config.maxMaxBufferLength option. This option allows you to set the maximum buffer length in seconds that hls.js will use for preloading content. The default value for this option is 30 seconds.
To set this option, you can use the following code:
var hls = newHls();
hls.config.maxMaxBufferLength = 60; // Set the buffer length to 60 secondsKeep in mind that increasing the preloaded buffer size can improve the playback experience, but it may also increase the initial load time for your content and use more network bandwidth.