Feature Request: Video Quality Controls for iOS and Android

[pateljoel]

I've been playing some videos over MP4 and HLS with react-native-video testing internet speeds and I found out that the video starts off low quality and then over about 5-15 minutes the video quality gradually becomes better.

For context I am playing an 4K and an 8K video with my app and I get a 480p video when the video first starts which is a bit annoying.

So my feature request is for react-native-video to have a Video Quality Control which allows the user to change the selected video quality in the player.

I believe this is an essential feature for both iOS and Android as it is not ideal to play videos that are supposed to be high quality to have the first impression be in low quality (play in 720p or 480p at first). The expectation is that if the user chose the 1080p, 2K, 4K or even 8K quality setting it should start to play in that quality bracket.

Please strongly consider this feature.

[freeboub]

@pateljoel did you try to use object: bufferConfig ? regarding to buffering configuration, you can also have a look to exoplayer documentation, if other flags configuration are needed. but notice the package highly use exoplayer features.

[pateljoel]

@freeboub Is there a way to have this setting without Exoplayer? Last time I checked, Exoplayer is highly unstable and crashes almost all the time.

Also i'm assuming iOS can have the same quality settings just like Android and also by using the bufferConfig because I can see popular apps such as YouTube on iOS has a quality setting as you can see below:

[freeboub]

Hello, for sure it will not be available on MediaPlayer at its support has been dropped on V6.0.0... exoplayer implementation is stable on V6, you should try this version. There should be a stable release soon.

[pateljoel]

@freeboub Does this mean a quality setting would not be available on iOS? I don't understand, how come that YouTube and many over video apps have this?

[freeboub]

No, I am talking of android only. please update on V6.0.0, V5.2.1 is end of life. And please understand that I also consider this feature very interesting!

[pateljoel]

@freeboub I will update to V6.0.0 having spent a week planning to do so, but does this mean that there would be a possibility for iOS to have these qualities controls like Android, I do find this interesting but also essential as YouTube has this.

Surely since they have it, I don't see any reason why this cannot be included, if not is there any way or the closest way of doing this on iOS with react native video?

Any help would be appreciated.

[pateljoel]

ping @freeboub are you able to add a label for this on iOS? Since YouTube does the same?

[freeboub]

I don't have time to implement that, but feel free to open a Pull request!

[pateljoel]

@freeboub Has this feature been prioritised now, I spoke to a member of react-native-video and they told me that this is on their list next.

[freeboub]

@pateljoel This is an open source project with only gentle and non retributed contributors. If you want the feature asap, you have to implement it by yourself. I will be happy to provide you feeback on your implementation.

[pateljoel]

@freeboub Apologies, but I'm not a developer, but if I pay a sum for a feature to be made would you consider this?

[freeboub]

Unfortunately, I don't have time, maybe @KrzysztofMoch you can check with bart ?!

[bap-truongnv2]

i don't think that the player can change video quality (resolution). You upload 1 video file, then use some services to convert it to multiple resolutions and return the video URLs to mobile. Mobile then plays the video with the selected resolution. While playing, if the user changes resolution, mobile should seek to correct timing.

[gulsher7]

use this method to get video resolution from the video url

// Assuming you have a function to fetch the HLS master playlist const fetchHLSPlaylist = async (url) => { try { const response = await fetch(url); const playlistText = await response.text(); return playlistText; } catch (error) { console.error("Error fetching HLS playlist:", error); return null; } };

// Function to extract quality levels from the master playlist const extractQualityLevels = (playlistText) => { const qualityLevels = []; const lines = playlistText.split("\n"); lines.forEach((line) => { if (line.startsWith("#EXT-X-STREAM-INF")) { const match = line.match(/RESOLUTION=(\d+x\d+)/); if (match) { qualityLevels.push(match[1]); } } }); return qualityLevels; };

// Usage example const HLS_URL = "https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/hls.m3u8"; fetchHLSPlaylist(HLS_URL) .then((playlistText) => { const qualityLevels = extractQualityLevels(playlistText); console.log("Available quality levels:", qualityLevels); }) .catch((error) => { console.error("Error:", error); });

[rohankm]

+1

[freeboub]

The feature has been added for android, see: https://github.com/TheWidlarzGroup/react-native-video/pull/3778

[rahulnainwalttn]

Any plan to add it for ios @freeboub ?

[freeboub]

Any plan to add it for ios @freeboub ?

I will try, but it doesn't seem as easy as android...

[rahulnainwalttn]

OK