Cannot reload Video component

[sabbyt]

Hi,
Looking to be able to change Video source on button change - however, the Video component doesn't seem to play the changed source despite the component re-rendering. I have confirmed that on button press, the component re-renders and the Video prop's source uri has been changed - but the view doesn't change. And onLoad does not get called again.

[frankiewiczkamil]

Do you use exoplayer?

[sabbyt]

@frankiewiczsatlan yes using exoplayer

[frankiewiczkamil]

@sabbyt This happend to me as well, when I switched to exoplayer. You can try changing gradle files back to vanilla react-native-video android implementation (just like in readme) and check if it works then. Rememer, that dash will not work on it.

[frankiewiczkamil]

I discovered that issue for this problem has already been opened in here: #481.
It was even solved in this commit.

However... in npm official repo we have react-native-video 1.0.0 (last commit from January), which does not include that fix.
To get current master branch (react-native-video 1.1.0) I replaced my dependency definition in packages.json as follows:
"react-native-video": "react-native-community/react-native-video#master"
and switching stream works for me by far.

PS I had to add this

dependencies {
...
   compile 'com.android.support:design:24.2.0'`
...
}

to my android/app/build.gradle file because of this Multiple dex files define Landroid/support/v4/ error

[johndanek]

@frankiewiczkamil I am having some difficulty regarding the Multiple Dex Files Defined error you mentioned. If I just use react-native-video everything works and compiles fine. If I try to use the -exoplayer variant, I can't execute react-native run-android due to that error. Any advice for getting past this?

[frankiewiczkamil]

@johndanek Do you use exoplayer like in last comment here?

[duanyachao]

@frankiewiczkamil Hi, my video component doesn't change too, I replaced dependency definition in packages.json as follows:
"react-native-video": "react-native-community/react-native-video#master" and add dependencies { ... compile 'com.android.support:design:24.2.0'
...
}` as you do ,but it doesn't work

[frankiewiczkamil]

@duanyachao check if your /android/settings.gradle looks like this:

include ':react-native-video-exoplayer'
project(':react-native-video-exoplayer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

instead of

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

[duanyachao]

@frankiewiczkamil I will play HLS streaming, it desn't work with react-native-video for HLS streaming

[frankiewiczkamil]

@duanyachao check if you put correct type in source parameter. If not sure, don't put anything - it should detect it automatically. I tested it with this url and it works fine

source: { uri: "http://184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8" }

[duanyachao]

I have set what you tell me, it's the code for the video component
<Video ref={(ref) => { this.player = ref }} volume={1.0} rate={1.0} paused={false} repeat={false} autoplay={true} resizeMode="contain" preload={'none'} loop={false} controls={true} muted={false} playInBackground={false} playWhenInactive={false} ignoreSilentSwitch={"ignore"} progressUpdateInterval={250.0} style={styles.backgroundVideo} source={{uri:url}} /> it doesn't still work where is wrong thank you

[duanyachao]

@frankiewiczkamil I have set what you tell me, it's the code for the video component
<Video ref={(ref) => { this.player = ref }} volume={1.0} rate={1.0} paused={false} repeat={false} autoplay={true} resizeMode="contain" preload={'none'} loop={false} controls={true} muted={false} playInBackground={false} playWhenInactive={false} ignoreSilentSwitch={"ignore"} progressUpdateInterval={250.0} style={styles.backgroundVideo} source={{uri:url}} /> it doesn't still work where is wrong thank you

[duanyachao]

@frankiewiczkamil i add dependencies { ... compile 'com.android.support:design:24.2.0'
...
} it's work can change the video source ,thank you very much