search

TheWidlarzGroup / react-native-video

A <Video /> component for react-native
https://thewidlarzgroup.github.io/react-native-video/
MIT License
7.19k stars 2.9k forks source link

[Android] Playing local files #125

Closed hunteredwards closed 8 years ago

hunteredwards commented 8 years ago

I have tried this: <Video source={{uri: "/storage/emulated/0/test.mp4" }} .... to no avail, and I was wondering if anyone has had any success playing local files on Android. If so, I would like to know how or if this is currently only available for iOS.

@buhe Is your pull request trying to fix this?

Thanks.

buhe commented 8 years ago

yes !

isair commented 8 years ago

Try putting your video file in your Android raw sources folder and then using it as <Video source={{ uri: 'test' }} />. I will keep this issue open until the README is updated to state this.

hunteredwards commented 8 years ago

@isair the requirement is for playback on video found within the external storage directory, not assets compiled with the app. Basically, the functionality should mimic playback like found with the Gallery app.

@buhe do you have a working example of playing back an external resource?

Additionally, has anyone been able to play locally stored videos on either iOS or Android?

hunteredwards commented 8 years ago

I figured it out. This function adds the prefix file:// to the uri. On both platforms, commenting this out and having the absolute path without the file:// causes the playback for a local file to work as intended. Maybe a bug?

buhe commented 8 years ago

Android is ok after comment this , but don't luck at iOS. My case is I download some online video and cache it ,user don't need download again next playback.

hunteredwards commented 8 years ago

@isair since you've added a good amount of the android support, I was wondering if you have managed to get remote URLs to play? I haven't had any success thus far. Any help would be greatly appreciated. Thanks.

buhe commented 8 years ago

@hunteredwards you can try my fork to play external storage video. I am not android expert, so this fork maybe not unstable..but it is meet my requirement. "react-native-video": "git://github.com/buhe/react-native-video.git#d872933"

ghost commented 8 years ago

When I created Lumpen Radio iOS app using this module a year ago I was able to store local video files under the project root folder in src/assets/videos. I was happy with this as I envisioned one day being able to leverage the same location for Android.

During the Android support addition @isair mentioned video files for Android can be stored under android/app/src/main/res/raw/. While I'm extremely grateful for the Android support, the location specified seems less than ideal as it lends itself to duplication of video assets by platform.

Poking through the open PRs I noticed this promising gem, which appears to allow one to leverage the RN asset system to do the resolving and help prevent by-platform file duplication or any kind of funky "cross-the-streams" loading of files for iOS from the Android raw sources folder.

Keywords storage location where to store android video

Related issues https://github.com/react-native-community/react-native-video/issues/246

ghost commented 8 years ago

See #251 for loading local files using RN assets system.

tadeaspetak commented 8 years ago

Has anyone figured out how to load anything from /storage/emulated/0... on Android? I have tried a bunch of things (commenting out adding the file:// and updating the Java class to use FileInputStream when setting src) but to no avail... cheers a ton in advance!

valerybodak commented 7 years ago

@tadeaspetak Did you resolve issue with load anything from /storage/emulated/0... ?

pqminh commented 6 years ago

Did anyone resolve issue?

bd-arc commented 4 years ago

For anyone stumbling upon this issue while trying to load local videos (i.e. native project assets rather than RN static resources), I have a few tips.

In my case, it was a matter of saving precious megabytes for CodePush updates. Indeed, when the videos are part of the RN project's static resources, they will be included in the JS bundle sent to CodePush and retrieved by the users. I'll let you do the calculation, but when you save more than 30 MB per update times 50k users, that counts! Not to mention the enhanced user experience.

To do so, you'll first need to add the video files to your project:

Then for the tricky part that cost me a lot of trials and errors:

I didn't find this info anywhere so I thought it could help a frustrated dev or two ;-)

ZeeshanAhmadKhalil commented 3 years ago

For anyone stumbling upon this issue while trying to load local videos (i.e. native project assets rather than RN static resources), I have a few tips.

In my case, it was a matter of saving previous megabytes for CodePush updates. Indeed, when the videos are part of the RN project's static resources, they will be included in the JS bundle sent to CodePush and retrieved by the users. I'll let you do the calculation, but when you save more than 30 MB per update times 50k users, that counts! Not to mention the enhanced user experience.

To do so, you'll first need to add the video files to your project:

  • Android: Save your mp4 files under the directory android/app/src/main/res/raw. Note that files in this directory must be lowercase and underscored (e.g. my_video.mp4) and that subdirectories are not supported by Android.
  • iOS: Open Xcode and add your mp4 files to the project (right-click the project and select "Add Files to [PROJECTNAME]"). Subdirectories are supported by iOS.

Then for the tricky part that cost me a lot of trials and errors:

  • Android: use the filename as the uri but don't specify the file extension.

    • Example: <Video source={{ uri: 'my_video' }} />

  • iOS: it's the exact opposite, meaning you need to specify the file extension.

    • Example: <Video source={{ uri: 'my_video.mp4' }} />

I didn't find this info anywhere so I thought it could help a frustrated dev or two ;-)

How we can download file in android/app/src/main/res/raw