React-native-video: Video not being played

Created on 27 Jul 2016  路  19Comments  路  Source: react-native-video/react-native-video

I have been trying to play a video but I can't make it work. Everything was installed and linked, I'm able to import the Video package without errors but I'm stuck at a white screen and I really don't know the problem, the debug console doesn't show any errors neither the app creator.

So far this is my code (as you can see is a simple video test):
image
image

And my video (background.mp4) is at the root:
image

Most helpful comment

@magicspon It's hard to guess what you're doing, specifically. But the following should help:

  1. Documentation updated this morning for new use of the RN asset system available in 0.9.0: https://github.com/react-native-community/react-native-video#load-files-with-the-rn-asset-system (though the existing approach using source={{uri: 'foo.png'}} remains unchanged).
  2. Example code using 0.9.0 with local mp4 file: https://github.com/jhabdas/lumpen-radio/blob/5279b00da8428fd2a79af426dec60eb0fee06a26/src/components/BackgroundVideo.js using both asset system (Android) and existing approach (ios). develop branch can be pulled and run for example.
  3. Due to a known bug use of the RN asset system for MP4s (i.e. using require('../assets/video/foo.mp4') works _only_ for Android.
  4. Lastly be sure, if you're adding video assets to iOS and not using the asset system (because it won't be possible to for that platform until at least RN 0.32 due to aforementioned bug), you've included the asset in the copy bundle step in Xcode target settings Build Phases as shown below:

screen shot 2016-08-17 at 8 59 26 am

UPDATE 10 Sep 2016: MP4 video assets will work properly when served from the packager with require as of RN 0.33. See the bugfixes in the release notes

All 19 comments

hi cande1gut try to bring the video in the generated project (iOS or Android) for me worked.
In every day use I prefer load a remote file.
Hope this help you

Hi, @g0dz1ll4, yeah, I was working like that, I'm able to play the video remotely, but I was trying to do it locally since is a best practice. Thank you.

@g0dz1ll4 I tried what you suggested, to bring the video into the Android generated project but it didn't work. Do I have to change my uri or is it ok like that?

@cande1gut sorry but actually i'm away .. I've checked on iOS and all run well you have tried to put the file in raw or assets directory on android studio project?

Thank you @g0dz1ll4, I'm now able to load local files by a pull someone did to import files like react native does with the default path.

Great @cande1gut , can you describe the solution that work well for you ? so if some other has the same problem find a detailed solution ? ;)

Sure, I managed to import local files with the help of this pull: use react native asset resolving #251

So, this didn't work very well for me, but I found that dropping the video into
android/app/src/main/res/raw/ works (at least for android)

hhhmm weird @kvnvelasco, maybe it is where react-native-video module checks for assets by default, but good to know that it works for you :)

I'm also having this issue. I can play remote files but not local ones

Hey @magicspon have you tried what @kvnvelasco suggests? Therefore, if you still have this issue try to implement this, which is a pull request to be able to use local files like react native does by default: React Native asset resolving

251 merged. Please close this issue to help keep repo clean.

@cande1gut I did try but to no success. I shall take another look tomorrow. Thanks

@magicspon make sure to pull version 0.9.0 of the NPM module. Brent released it within the last 12 hours.

@jhabdas, @candle1gut I've pulled in version 0.9.0 via npm i [email protected] still no joy.

@magicspon It's hard to guess what you're doing, specifically. But the following should help:

  1. Documentation updated this morning for new use of the RN asset system available in 0.9.0: https://github.com/react-native-community/react-native-video#load-files-with-the-rn-asset-system (though the existing approach using source={{uri: 'foo.png'}} remains unchanged).
  2. Example code using 0.9.0 with local mp4 file: https://github.com/jhabdas/lumpen-radio/blob/5279b00da8428fd2a79af426dec60eb0fee06a26/src/components/BackgroundVideo.js using both asset system (Android) and existing approach (ios). develop branch can be pulled and run for example.
  3. Due to a known bug use of the RN asset system for MP4s (i.e. using require('../assets/video/foo.mp4') works _only_ for Android.
  4. Lastly be sure, if you're adding video assets to iOS and not using the asset system (because it won't be possible to for that platform until at least RN 0.32 due to aforementioned bug), you've included the asset in the copy bundle step in Xcode target settings Build Phases as shown below:

screen shot 2016-08-17 at 8 59 26 am

UPDATE 10 Sep 2016: MP4 video assets will work properly when served from the packager with require as of RN 0.33. See the bugfixes in the release notes

@jhabdas HUZZZAH! It's alive... I'm only developing for Android so a few points I can ignore.

But using the new require syntax is working.

Thanks for your help, greatly appreciated

Oh fo sho

I did a straight copy and paste, but no luck either. I see the progress bar indicating that the video is indeed advancing frames, but it's all a black/blank video, no matter what mp4 i insert, remote or local.

I am only testing in xCode/iOS simulator.

Here are my dependencies:
"firebase": "^3.2.1",
"react": "15.3.1",
"react-native": "^0.34.1",
"react-native-elements": "^0.6.0",
"react-native-material-kit": "^0.3.2",
"react-native-orientation": "^1.17.0",
"react-native-vector-icons": "^2.1.0",
"react-native-video": "^0.9.0"

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ihilt picture ihilt  路  19Comments

bsiddiqui picture bsiddiqui  路  19Comments

jenshandersson picture jenshandersson  路  25Comments

jonas-arkulpa picture jonas-arkulpa  路  22Comments

shahankit picture shahankit  路  30Comments