Question: is there a way to tell a mux-video element to stop streaming?

[bennlich]

Say I have a bunch of video elements on a single page, and I want to only use bandwidth on the ones that are currently visible in the user's viewport (i.e. not waste bandwidth buffering offscreen videos).

In the past, with a plain HTML5 <video> element, I've accomplished this by removing the src attribute from videos that were offscreen and keeping track of their timestamp, then re-adding the src and currentTime attributes whenever they moved back on-screen again.

Can you recommend a way to accomplish something like this with <mux-video>?

Thank you!

[luwes]

Good question. This is possible by using the preload="none" attribute, once the videos enter the viewport change preload to metadata or auto. It works very similar to the native video element but under the hood it's controlling hls.js.
https://github.com/muxinc/elements/blob/main/packages/playback-core/src/index.ts#L428-L458

[bennlich]

Hey thanks for this quick reply @luwes . Once loading has started, though, is it possible to stop it? For example, in the scenario I described, imagine the user scrolls the page so that a loading video goes off screen. (For vanilla video elements, deleting the src attribute was my technique for stopping ongoing loading.)

I'm guessing (and looking at the code you linked) preload is only about controlling the behavior before the first play. Is that right?

[bennlich]

I see now that my initial question is missing a piece. Not sure how that happened. I will edit it back in.

[luwes]

Currently there is no idiomatic way to do that. Good idea to bring up to the team.

There is a undocumented muxVideo._hls property that returns the instance of hls.js.
With access to that you could disable loading. I believe muxVideo._hls.stopLoad() should do it. Cheers!

[bennlich]

Cool! I'll give this a shot. Thanks for your help.

[bennlich]

This worked great! And muxVideo._hls.startLoad() resumes. The only annoying thing is that I have to use a different API for native-hls video elements (i.e. ios). In that situation, I guess I'll use the src removal trick that I described in the original question.