Feature Request: Add startLevel prop to control the quality of first video fragment

[staniwasd]

Is there an existing issue for this?

• I have searched the existing issues

Which Mux Elements/Packages does this apply to? Select all that apply

mux-video, mux-video-react, mux-player, mux-player-react

Description

Hey!

A fairly common problem these days is that a stream starts with a lower video quality, and after checking your internet connection, the next segment is generally of better quality. The easiest way to reproduce it is to open any stream on Twitch. This may be fine for long streams, but in the case of a short video, especially when you loop it, it becomes a more serious problem because this low quality fragment remains in the cache.

The current library (hls.js) on which the MUX components are built has a startLevel parameter that allows you to control the quality of the first fragment. Having this capability will help improve the user experience by providing a better quality stream from the start.

This can be a separate prop startLevel, or a general prop, for example hlsConfig, which allows you to override all params in hls.

// React example

<MuxVideo
     src={src}
     startLevel={999} <-- this maximizes the quality of the first fragment
     ...
/>

hls.js API doc - https://github.com/video-dev/hls.js/blob/master/docs/API.md#startlevel
Pull request with the change - #772

Expected Behavior

Ability to control the quality of the first video fragment through the startLevel property.

[cjpillsbury]

FYI @staniwasd I chatted with the team and we're all on board with adding an "unofficial"/"unstable" (though not likely to change for the foreseeable future") _hlsConfig prop. We just need to schedule it. Hoping to get it into a release soon though! 🎉 Thanks for all the activity.

[jakubslambor]

I second this! Encountered the exact issue described. I was able to access hls by videoElement.value._hls, but this only works in chrome; in safari, this is undefined

will the _hlsConfig prop be made available anytime soon? I would really appreciate it as well! Thanks ❤️

[dylanjha]

@mjamesCZ the reason for that is that in Safari Mux Player uses Safari's native HLS engine instead of Hls.js (we find it to be slightly better in terms of Quality of Experience that we track with Mux Data)

You can force Safari to use Hls.js by setting prefer-playback="mse". More details about that here

However, @mjamesCZ & @staniwasd we have a new parameter that you might find better, which is:

rendition-order="desc"

What this does is re-order the rendition list to have the highest rendition at the top. Most players (Hls.js included) will start by attempting to play the first rendition in the list. With this setting I think you'll get the desired behavior that you're going for.

The tradeoff is that startup time will be a little worse (because the player has to download, or attempt to download the bigger video), but it seems like that tradeoff is one you're willing to make.

[jakubslambor]

Thank you for the help @dylanjha! Unfortunately, I'm still having problems with this:

• prefer-playback="mse" and setting the startLevel manually does the trick, unfortunately, this does not seem to work on iOS, where _hls is undefined and therefore native playback is most likely used
• as I'm sourcing the hls manifest from a different provider to MUX, rendition-order="desc" does not seem to be working for me... any ideas? 🙏 this is the .m3u8 file I'm working with (and have control over how it looks, would changing the order there do the same as rendition-order="desc"?):

#EXTM3U
#EXT-X-MEDIA:TYPE=AUDIO,URI="240p/audio/index.m3u8",GROUP-ID="default-audio-group2654984",NAME="stream_0",AUTOSELECT=YES,CHANNELS="2"
#EXT-X-MEDIA:TYPE=AUDIO,URI="360p/audio/index.m3u8",GROUP-ID="default-audio-group2654985",NAME="stream_0",AUTOSELECT=YES,CHANNELS="2"
#EXT-X-MEDIA:TYPE=AUDIO,URI="480p/audio/index.m3u8",GROUP-ID="default-audio-group2654986",NAME="stream_0",AUTOSELECT=YES,CHANNELS="2"
#EXT-X-MEDIA:TYPE=AUDIO,URI="720p/audio/index.m3u8",GROUP-ID="default-audio-group2654987",NAME="stream_0",AUTOSELECT=YES,CHANNELS="2"
#EXT-X-MEDIA:TYPE=AUDIO,URI="1080p/audio/index.m3u8",GROUP-ID="default-audio-group2654988",NAME="stream_0",AUTOSELECT=YES,CHANNELS="2"
#EXT-X-STREAM-INF:BANDWIDTH=322427,AVERAGE-BANDWIDTH=254194,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=426x240,FRAME-RATE=30.000,VIDEO-RANGE=SDR,AUDIO="default-audio-group2654984",CLOSED-CAPTIONS=NONE
240p/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=670812,AVERAGE-BANDWIDTH=530022,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=640x360,FRAME-RATE=30.000,VIDEO-RANGE=SDR,AUDIO="default-audio-group2654985",CLOSED-CAPTIONS=NONE
360p/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1306191,AVERAGE-BANDWIDTH=1039462,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=853x480,FRAME-RATE=30.000,VIDEO-RANGE=SDR,AUDIO="default-audio-group2654986",CLOSED-CAPTIONS=NONE
480p/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2548100,AVERAGE-BANDWIDTH=2081178,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=1280x720,FRAME-RATE=30.000,VIDEO-RANGE=SDR,AUDIO="default-audio-group2654987",CLOSED-CAPTIONS=NONE
720p/index.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=6838938,AVERAGE-BANDWIDTH=5644006,CODECS="avc1.42c01e,mp4a.40.2",RESOLUTION=1920x1080,FRAME-RATE=30.000,VIDEO-RANGE=SDR,AUDIO="default-audio-group2654988",CLOSED-CAPTIONS=NONE
1080p/index.m3u8

[cjpillsbury]

@mjamesCZ unfortunately there's no way to control the equivalent of startLevel on iOS yet because it will always rely on native browser playback instead of Media Source Extensions (which is what Hls.js uses under the hood). Apple has recently added a paired down version, called Managed Media Source to iOS, and Hls.js has even more recently added support for enabling its usage, but we haven't yet added any official way of using that, since it's pretty new. That said, I'm hoping to squeeze in the unofficial _hlsConfig property I discussed before into a canary release sometime this week 🤞.