Preload x seconds of video off screen

[austinh]

What do you want to do with Hls.js?

Hello, I would like to partial preload a video:

1. Preload x seconds (or bytes) of video off screen and then when an hls instance somewhere else encounters this source url, load it from the cache, if not fetch the video from the network.
2. I need to be able to abort this fetch mid flight if I decide the user no longer intents to view this video (and to save network and memory)

Concrete product use case:
For example, lets say a web page has 5 visible video thumbnails on a grid with 50 video thumbnails total. Clicking the thumbnail opens a video player. The 5 thumbnails that are visible in the DOM I want to be able to preload the manifest and segment for first 5 seconds with loadSource on a IntersectionObserver callback - but only the first 5 seconds. Is that possible? And then as the user scrolls, I want to preload other videos, and stop the XHR requests of the old videos the user has scrolled past. Do I have access to an AbortSignal or AbortController from hls.js somehow?

And then, when the user clicks one of these visible videos, if the video is in the cache, we can start playing instantly the first 5 seconds and continue buffering the rest of the video as expected . Can this happen in the example I linked in the What have you tried so far? I cant seem to get it to work.

Shaka Player has a good preload API for this and Im considering switching to them if this is not possible.

Thanks

What have you tried so far?

I did see this issue which might give me half of what I want, but I couldn't figure out how to abort load requests after they have been sent off, (preferably with an AbortSignal so that I can hook into some other apis that are expecting this interface) or handle partial requests

[robwalch]

You can preload an HLS asset by calling loadSource and not attaching a media element. Playlists and the first segment of each playlist will be loaded and ready to append on attach.

To abort inflight requests call stopLoad. To remove it all call destroy.

[austinh]

Is it possible to define the exact amount of time or bytes i would like to preload?

[robwalch]

The amount buffered, once attached to a media element, can be defined. Those configuration options can be updated on the fly.

Loading auto starts up the point where the first append would occur and is then blocked. You can disable auto start load and can start and stop loading at any time.