Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Video Quality Controls for iOS and Android #3220

Open
pateljoel opened this issue Aug 28, 2023 · 19 comments
Open

Feature Request: Video Quality Controls for iOS and Android #3220

pateljoel opened this issue Aug 28, 2023 · 19 comments

Comments

@pateljoel
Copy link

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
Copy link
Collaborator

freeboub commented Sep 3, 2023

@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
Copy link
Author

@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:

Screenshot 2023-09-05 at 08 05 58

@freeboub
Copy link
Collaborator

freeboub commented Sep 5, 2023

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
Copy link
Author

@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
Copy link
Collaborator

freeboub commented Sep 5, 2023

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
Copy link
Author

@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
Copy link
Author

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

@freeboub
Copy link
Collaborator

freeboub commented Oct 5, 2023

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

@pateljoel
Copy link
Author

@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
Copy link
Collaborator

@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
Copy link
Author

@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
Copy link
Collaborator

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

@bap-truongnv2
Copy link

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
Copy link

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
Copy link

rohankm commented Apr 17, 2024

+1

@freeboub
Copy link
Collaborator

The feature has been added for android, see: #3778

@rahulnainwalttn
Copy link

Any plan to add it for ios @freeboub ?

@freeboub
Copy link
Collaborator

Any plan to add it for ios @freeboub ?

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

@rahulnainwalttn
Copy link

OK

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants