I am using react-native-video for displaying hls video.
Video link:- https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
As the video is in hls, I need to change the quality of the videos either manually or auto But I can't achieve this using react-native-video. I had done this for the web also using reactjs and had done quite successfully. I had also set up the exoplayer for react-native-video by adding the react-native.config.js file and pasting those codes.
module.exports = {
dependencies: {
'react-native-video': {
platforms: {
android: {
sourceDir: '../node_modules/react-native-video/android-exoplayer',
},
},
},
},
};
But my problem is most of the props are not working in this player. As selectedVideoTrack never work.
VideoComponet code:
<Video
ref={videoRef}
source={{
uri: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}}
resizeMode={'contain'}
style={styles.fullscreenVideo}
fullscreen={true}
hls={true}
rate={1.0}
volume={1}
muted={false}
repeat={false}
playInBackground={false}
playWhenInactive={false}
minLoadRetryCount={5}
selectedVideoTrack={{
type: 'resolution',
value: 240,
}}
onError={(err) => {
console.error(err);
}}
onSeek={(data) => {
console.log(`seeked data `, data);
}}
onBuffer={(data) => {
console.log('buffer data is ', data);
}}
reportBandwidth={true}
onBandwidthUpdate={(data) => console.log('bandwidth updated', data)}
selectedVideoTrack={{
type: 'resolution',
value: 360,
}}
/>
If anybody can suggest me some other ways to achieve this then, please