[shaka] Preload shaka media

[austinh]

Hello, i have an app with a grid of videos and I would like to preload them as the user scrolls, and stop loading them as the user scrolls past them (user unlikely to play those they scroll past).

shaka player provides a preload api to prefrtch the manifest and the first segment, as well as destroy/stop preloads midflight. Does this library expose any way for the media elements to preload things, or at least have access to the underlying instance? Would be nice to customize some of the initialization options too

hls.js also has a loadSource function, can I utilize that with hls-video element?

if not, how do you recommend someone preload something (ideally from a cache)

[luwes]

Hi, thanks for bringing this up.

hls-video has this preload function built in as you can see here
https://github.com/muxinc/media-elements/blob/main/packages/hls-video-element/hls-video-element.js#L51-L87

The preload attribute / property together with the load() method should offer what you are looking for.

For shaka-video we haven't implemented preload it seems so I'll leave this issue open to track it.
If you feel up for it happy to review a PR for this addition.

[austinh]

Thanks for your response. Unfortunately that does not allow preloading off screen (before a video element has been initialized) . This is normally accomplished by calling an imperative function during some sort of user intent, but the media may not be attached yet. Is that something the hls player element allows access to?

[luwes]

yes, you can create and upgrade the element before attaching to the document.

since it's a custom element you'd have to use
https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/upgrade

example:
https://codesandbox.io/p/sandbox/hls-video-preload-x8wg2l?file=%2Findex.html%3A37%2C16