<Video
source={{ uri: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" }}
resizeMode="cover"
repeat
controls
fullscreen = {this.state.fullscreen}
fullscreenOrientation = {"landscape"}
//onBuffer={this.onBuffer} // Callback when remote video is buffering
//onError={this.videoError} // Callback when video cannot be loaded
style={styles.backgroundVideo}
/>
I am using this above code and in the Android manifest orientation in portrait. I am click on the full screen state has been changes according to it. But it just exit in a second. As i am getting a little fluctuation and maybe the app is showing full screen and then exit from full screen. But i am not able to see it. Or you can say full screen is not working. As in the IOS it is working properly. I tried multiple from github but not able to achieve it.
Related
Do you know a lib / a way to display a thumbnail of a local video ?
I select a video from my device with react-native-image-picker and i would like to display a thumbnail of this video in a View or flatlist in case of several selections
You can use below plugin for get thubmnail form local path
https://github.com/phuochau/react-native-thumbnail#readme
import RNThumbnail from 'react-native-thumbnail';
let getFilePath = ''
RNThumbnail.get(filepath).then((result) => {
console.log(result.path); // thumbnail path
getFilePath = result.path;
})
After getting path for display purpose you can use react-native-video for play and display
react-native-video and use below code
<Video source={{ uri: getFilePath }} pause={true} />
Hope this will work for you.
If you are using Expo and you are not deploying to web, this package will do the job for you: https://docs.expo.dev/versions/latest/sdk/video-thumbnails/
I'm trying to show some images in my React Native app. It's a simple app, only for Android. The app get informations from an API. The initial View is a list of items and when I click in one item, it gets more info from the API and show in a new page. I also get some urls that points to images that are kept in a S3 bucket in AWS.
This is how I show the images:
<ScrollView>
{this.state.urls.map(url => {
<Image
source={{uri: url}}
style={{width:400, height:200}}
/>
}
</ScrollView>
The problem is that it's not showing those images. I can see that there is a part of the page that is for the image. I can see that because if a put the image first and after that some text, the text will appear at the bottom of the page. I don't know what is going on that the image doesn't appear.
I searched for an answer, found something about using https instead of http (at least for iOS). Found that I need to set width and height. I already did those things and others but it's not working.
I also tried just picking a image from the internet and putting it url direct in uri but it still doesnt't work.
You're missing a return statement in your map function.
<ScrollView>
{this.state.urls.map(url => {
return <Image
source={{uri: url}}
style={{width:400, height:200}}
/>
}
</ScrollView>
UPDATE
I just tried the url that you provided in the above comment and it doesn't work on my device. I tried a different image from the internet this one and it works. There may also be something that is stopping you from accessing the images from within a mobile app.
To debug further I try would a single <Image .../> with the image hosted on AWS and see if you can get that to show. There may need to be some AWS configuration that you need to change to allow the image to be accessed from a mobile device.
Assuming your image URLs are accessible in your application.
The below code will show your images. Actually you forgot to return a component from the map which is a must have.
<ScrollView>
{this.state.urls.map(url => {
return <Image
source={{uri: url}}
style={{width:400, height:200}} /> }
}
</ScrollView>
I'm trying to use WebView to display a video hosted on reddit. The link i am using is https://v.redd.it/e3u0b3ej71k11/DASH_2_4_M which is for this post https://v.redd.it/e3u0b3ej71k11/ . On IOS the video will automatically go full screen and play but gives me this error
On android it doesn't give me an error but it has a video that is just black, but does have the correct run time. I'm not really sure how the endpoint DASH_2_4_M works but I got that url from reddit api.
<WebView
source={{uri: this.state.data[0].data.children[0].data.media.reddit_video.fallback_url}}
style={{height: 650, width: '100%'}}
bounces={false}
scrollEnable={false}
/>
I am using react-native-ImagePicker and react-native-video packages.
I selected a video using ImagePicker and it worked perfectly fine.
Now what I want is to display the selected video for which I am using
react-native-video as follows
`<Video source={source}
ref={(ref) => {
this.player = ref
}}
rate={1.0} // 0 is paused, 1 is normal.
volume={1.0} // 0 is muted, 1 is normal.
muted={false} // Mutes the audio entirely.
paused={false} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.*
repeat={true} // Repeat forever.
playInBackground={false} // Audio continues to play when app entering background.
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown.
ignoreSilentSwitch={"ignore"} // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
onBuffer={this.onBuffer} // Callback when remote video is buffering
onTimedMetadata={this.onTimedMetadata}/>`
where source is
`source = videoUrl.split("file://")[1]`
I got it working.
<Video> was missing style. Once i set it it worked perfectly fine.
I more thing sometime an error comes "cannot read constant of undefined" this is because video library is not linked properly. Delete and add again in xCode and the error will go
I am trying to show a video using the react-native-video plugin. When testing on the device the video is working but on the iOS simulator it's showing black screen (Testing on simulator is faster and easy for me). Someone having the same issue. Here is my code:
<Video
source={{ uri: 'url' }} // Can be a URL or a local file.
ref={(ref) => { this.player = ref; }} // Store reference
rate={1.0} // 0 is paused, 1 is normal.
volume={1.0} // 0 is muted, 1 is normal.
muted={false} // Mutes the audio entirely.
paused={this.state.paused} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.
repeat={false} // Repeat forever.
playInBackground={false} // Audio continues to play when app entering background.
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown.
progressUpdateInterval={250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
onLoadStart={this.loadStart} // Callback when video starts to load
onLoad={this.setDuration} // Callback when video loads
onProgress={this.setTime} // Callback every ~250ms with currentTime
onEnd={this.onEnd} // Callback when playback finishes
onError={this.videoError} // Callback when video cannot be loaded
onBuffer={this.onBuffer} // Callback when remote video is buffering
style={styles.backgroundVideo}
/>
Simulator is designed to assist you in designing, rapidly prototyping, and testing your app, but it should never serve as your sole platform for testing. One reason is that not all apps are available in the simulator. For example, the Camera app is available only on hardware devices and cannot be replicated in the simulator.
The simulator won't use your computer's camera, so anytime you are using the camera for anything, it will just default to a black screen.
More Info: https://developer.apple.com/library/content/documentation/IDEs/Conceptual/iOS_Simulator_Guide/GettingStartedwithiOSSimulator/GettingStartedwithiOSSimulator.html
Your code is fine but you can't play the video in any simulator, you need run the app in real device either android or ios.