Caching next HLS video with hls.js

Do you have multiple HLS videos to be played one after the other? And do you want to cache the next video so that it starts playing immediately when u go to next?

Well, if your answer is “yes” to the above question, then this article is for you.

The above image is from my status update app where I have multiple hls videos playing one after the other.

Problem Statement

Though my app was working perfectly, it was taking some time for the next video to load. I wanted to make sure that the next video is already loaded before the user clicks on the next.

Solutions Tried

The first thought that came to my mind was:

1. Ask server to give me the first chunk of .ts file.
2. Make an API call and store the blob response in the file.
3. When the next video is clicked, give the blob as the source to the loadSource of hls.js.

The problem with the above solution was that the hls.js by default takes only m3u8 as the parameter and giving blob or even .ts reference was not playing my video.

The other solution that might have worked was to override the defaultloader of the hls.js This seemed like a lot of work and the end result was not guaranteed.

Final Solution

It was when I realized that the video once played would be cached so that when the same request is made again, it would give data from the cache. (Now u got the solution? :P)

All I had to do now was to just make a call for the next video beforehand and just go with the flow. I need not handle the response of the next call, instead just let the browser cache the response.

Now when the next video is clicked, the network call is made but my player doesn't have to wait for the response, since it's already cached.

This can be considered as a hack or workaround, but I personally feel this is a crazy solution hence decided to write an article about it.

I hope you found this article useful. I would love to hear your thoughts. 😇

Thanks for reading. 😊

Cheers! 😃

If you find this article useful, you can show your appreciation by clicking on the clap button. As the saying goes, ‘When we give cheerfully and accept gratefully, everyone is blessed’.