I'm currently using expo-av to show videos on my website in react native. The videos that expo-av provides comes as a uri link, but I want to allow people to upload videos from their computer files in order to post videos. Can someone show me how to do this? My code so far is:
const video = React.useRef(null);
const [status, setStatus] = React.useState({});
<Video
ref={video}
style={styles.video}
source={{
uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={status => setStatus(() => status)}
/>
<View style={styles.buttons}>
<Button
title={status.isPlaying ? 'Pause' : 'Play'}
onPress={() =>
status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
}
/>
</View>
Related
I want to three icons, two for video playing speed control and another one for video resolution change. Is there any way to add this kind of buttons ??
Here is my player:
<Video
key={videoId}
ref={video}
style={styles.videoPlayer}
source={{
uri: videofiles?.link,
}}
rate={1.0}
posterSource={{ uri: thumbnail }}
usePoster={!isActivity}
useNativeControls
resizeMode={Video.RESIZE_MODE_CONTAIN}
isLooping
onPlaybackStatusUpdate={status => {
statusChangeEvent(status);
}}
onFullscreenUpdate={onFullscreenUpdate}
/>
You can not modify your native controller. But you can use a hacky solution by using Pressable. You have to wrap your video component with Pressable. And after that, you can show your customize modal.
Here is an Example:
<Pressable>
<>
<Video
...
...
/>
//your customize modal
...
...
</>
</Pressable>
I am using a react-native-snap-carousel to render a photo gallery. I noticed that first entrance to the gallery takes a lot of time to render photos, especially if there are several photos.
const renderItem = ( photo) => {
console.log(photo); //<- it shows up quickly in the console, but the photo is not visible for a long time
return (
<View style={styles.imgContainer}>
<Image source={{ uri: photo.item.uri }} style={styles.img} />
</View>
)};
return (<Carousel
ref={carouselRef}
data={props.photos}
renderItem={renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
activeSlideAlignment={'center'}
onSnapToItem={index => setActiveSlide(index)}
/>)
What could be the reason for this behavior?
What can I do with this?
I am trying to add a poster image in the react-native-video library. In android, it works fine but in the iOS poster, the image shows for 1-2 seconds and then getting disappeared.
My react-native version is 0.63.3.
Below is my code.
<Video
style={this.props.styles.video}
source={{
uri: !this.state.isEnabled
? this.props.url
: this.props.caption_url,
}}
// Can be a URL or a local file.
ref={(ref) => {
this.player = ref;
}}
poster={this.props.poster}
paused={this.state.paused}
muted={this.state.muted}
controls={this.props.controls}
resizeMode={'cover'}
// resizeMode={'stretch'}
fullscreen={true}
onLoad={this.handleLoad}
onProgress={this.handleProgress}
onEnd={this.handleEnd}
fullscreen={this.state.fullscreen}
onError={(error) => {
console.log(error, 'THIS IS ERROR');
}}
/>
Im storing the local file in xcode,files are loading in simulator but not loading in ios device
im using react-native-webview version 5.0.1, in my webview im passing sourse as {uri: 'ICF-Package/ICFPackage/index.html'}
<WebView
source={Platform.OS === 'ios' ?
{uri: 'ICF-Package/ICFPackage/index.html'} :
{ uri: 'file:///android_asset/ICF-Package/ICFPackage/index.html' }
}
ref={(webView) => this.webView = webView}
originWhitelist={'["*"]'}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
useWebKit = {true}
//scalesPageToFit={true}
scrollEnabled={false}
onLoad={() => this.sendPostMessage()}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
allowsInlineMediaPlayback={true}
mediaPlaybackRequiresUserAction={true}
/>
im not getting any error message but files are not loading in real device
Maybe that helps you to debug WebViews a bit deeper if running at your Device: https://stackoverflow.com/a/48572797/1256697
But as little Workaround for local files, you could try to use the 'html' parameter instead the 'uri' Parameter for IOS:
const myHTML = require('./ICF-Package/ICFPackage/index.html');
<WebView
source={PolicyHTML}
style={{flex: 1}}
/>
Also see: https://aboutreact.com/load-local-html-file-url-using-react-native-webview/
But maybe the cleanest way to solve it for IOS is to put a copy of your html-File in Project > resources > index.html and link it like that with your Webview:
<WebView
style={{flex: 1}}
originWhitelist={['*']}
source={'./resources/index.html'}
javaScriptEnabled={true}
domStorageEnabled={true}
/>
I am trying to autoplay the youtube embedded video in my react native app.
here is my code,
render() {
const { data } = this.props;
const { loading } = this.state;
return (
<View>
<CloseButton onTrigger={this.closeModal.bind(this)} />
<PlayIcon onTrigger={this.playVideo} />
<Image source={{uri:data.src}} resize='contain' style={{height:250}} />
<Image
source={require('../../assets/img/grediant.png')}
resizeMode='cover' style={styles.gradientImage} />
<ContentWidget style={styles.infoContentTwo}>
<MyAppText style={{color:'white'}}>{data.title}</MyAppText>
</ContentWidget>
{this.state.openVideo && <View style={styles.webViewStyle}>
<WebView style={{height:250}} source={{uri:`${data.video}?autoplay=1`}} fullScreen={true} />
</View>}
{loading && <Spinner />}
</View>
);
}
but it's not working, I have a playIcon custom button, if I click that button then youtube video should play. I don't know where I am wrong in the code.
You can user react-native-youtube for embedding youtube video to your react native project. You can configure the property to autoplay the video.
<YouTube
videoId="KVZ-P-ZI6W4" // The YouTube video ID
play={true} // control playback of video with true/false
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>