My purpose is to play a video as background, which will start just after the app loaded,
<Video
ref={video}
style={styles.video}
source={{
uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
}}
isLooping
resizeMode="contain"
onPlaybackStatusUpdate={status => setStatus(() => status)}
onLoad={() => {video.setPositionAsync(0); video.current.playAsync()}}
/>
It worked twice for me. Until then just remained stopped after every compiling.
What change should it require? As a background video there should be no controls visible.
You can add the property shouldPlay in your code, this will make the video autostart playing, then the app loads. Hope it solved the problem.
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'm trying to display an Alert message when the video is done loading, but this event doesn't seem to be firing; I've seen that other people have had similar issues, but I haven't been able to find a solution yet.
<Video
onLoad={() => Alert.alert("LOADING")}
ref={video}
style={styles.video}
source={{
uri: "www.myvideo.com",
}}
repeat
/>
onLoadedData event does the trick:
<Video
onLoadedData={() => Alert.alert("LOADING")}
ref={video}
style={styles.video}
source={{
uri: "www.myvideo.com",
}}
repeat
/>
I am using React Native View Shot and I need our product to be able to capture live streaming from a m3u8 uri from React Native video package.
Currently on android it is capturing the screen fine, but on IOS there seems to be an issue of View Shot capturing just a blank video. How it looks on IOS
The livestream is the one playing below and the screenshot is the one taken of the video.
Are they just not compatible, or how would I resolve the issue of capturing a screenshot of a live stream on ios?
<TouchableOpacity onPress={()=>saveCapturedImage()} style={capturedShot ? styles.capturedShotStyle : styles.beforeShotStyle}>
{capturedShot ? <Text/> : <Text>Click to capture shot</Text> }
</TouchableOpacity>
<Image style={capturedShot ? styles.captureContainerPost : styles.captureContainerPre} source={capturedShot ? {uri: capturedShot } : null} />
{/* Viewshot component from React Native Viewshot */}
<ViewShot ref={viewShotRef} options={{ format: "jpg", quality: 0.9 }}>
{/* Video component from React Native Video, resizeMode cover to get full height on the component. Add pause controls for default, and controls can be toggled true/false */}
{videoUri && <Video
source={{
uri: videoUri,
}}
style={{
width: "100%",
height: "100%",
}}
resizeMode="cover"
controls={true}
paused = {false}
/>}
</ViewShot>
If anyone else wants an answer for this problem in future, I wrapped View shot capturing screen over a react native webview component playing a video on ios. It took a photo of a paused Youtube video playing. But even though View Shot captured a WebView of a video embedded, the content of the video was empty.
Not sure if this is because of RN View Shot, have emailed the founder of the package. Or does Ios block video content playing?
<View collapsable={false} style=Template:Height: "80%">
<WebView
originWhitelist={["*"]}
source={{
html:
'<iframe playsinline controls autoplay src="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8" ></iframe>',
}}
useWebKit={true}
originWhitelist={["*"]}
allowsInlineMediaPlayback={true}
style={{
height: 600,
width: 400,
}}
/>
</View>
</ViewShot>
But if anyone finds a better alternative solution let me know.
Here is my code I have changed the prop play-in background to false but still it is playing in the background what can I do to make audio stop when I change other page?
<KSYVideo
source={{
uri: "rtmp://184.72.239.149/vod/mp4:bigbuckbunny_1500.mp4"
}} // Can be a URL or a local file.
ref={ref => {
this.player = ref;
}} // Store reference
volume={1.0}
muted={false}
paused={this.state.paused} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.*
repeat={true} // Repeat forever.
playInBackground={false}
background.
progressUpdateInterval={250.0}
style={{ height: 400 }}
/>
Before navigating to another page setState Paused value
I'm using a Video component like this:
<Video style={[videoPlayerStyle, this.props.containerStyle, {height: videoHeight, width: videoWidth}] }
source={{uri: this.props.videoURL}}
ref={(ref) => {
this.player = ref
}}
paused={this.state.paused}
controls={nativeControls}
playInBackground={false}
repeat={false}
key="something123"
muted={this.state.mute}
onBuffer={this.onBuffer}
onEnd={this.onEnd}
onError={this.onError}
onLoad={this.onLoad}
onLoadStart={this.onLoadStart}
onProgress={this.onProgress}
/>
After video ends I show a button that allows user to play it again. I tried using:
restartPlayingVideo = (dict) => {
this.player.seek(0) // I tried with and without this
this.setState({paused: false})
}
But the video doesn't start again on Android (it works fine on iOS).
Am I missing something?
I used
<Video repeat={true} paused={this.state.paused} onEnd={this.setState({paused: true})}>
</Video>
Works for me.