I am trying implement a video functionality on Expo using Expo-av. But I got stuck in controlling video speed like 1x, 2x like youtube. Can any one help me on that .
Thank you in advance.
You can control it with the rate parameter inbuilt in expo-av
<Video
source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
rate={1.0} //CHANGE ME
volume={1.0}
isMuted={false}
resizeMode="cover"
shouldPlay
isLooping
style={{ width: 300, height: 300 }}
/>
Related
I was using react-native-image-rotate to rotate images but its no longer mantained, any idea what could be a good alternative.
ps: I am not using expo and I am using react-native v0.71.0
I tried react-native-photo-manipulator and other packages but the build fails everytime.
Use transform style properties.
<Image
style={{width: 50, height: 50, transform: [{rotate: '45deg'}]}}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}
/>
Basically title, i'm trying to change the resolution of the videos because they are too heavy, i'm using react-native-video to display the videos and i saw that it has a selectedVideoTrack which can be used to change it but it is not working for me. could i be using it wrong?
<Video
selectedVideoTrack={{
type: "resolution",
value: 240
}}
resizeMode = "stretch"
source={{ uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4' }}
style={{ width: 300, height: 300 }}
controls={true}
ref={(ref) => {
this.player = ref
}} />
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.
The platform is Android. I use to embed youtube video.
<View style={{ height: 240 }}>
<WebView
style={{ alignSelf: 'stretch' }}
scalesPageToFit={true}
source={{uri: `https://www.youtube.com/embed/${videoId[0]}?rel=0&autoplay=0&controls=1&showinfo=0`}}
/>
</View>
I can see the zoom in button but it can't be clicked.
I try to add scalesPageToFit={true} on is still not working.
Is it possible to zoom in when using with embed youtube url ?
Any help would be appreciated.
I have search and find the props allowsFullscreenVideo={true} set it true that enables fullscreen into the WebView.
Please check the final code.
<WebView
source={{uri: `https://www.youtube.com/embed/${videoId[0]}?rel=0&autoplay=0&controls=1&showinfo=0`}}
style={{ alignSelf: 'stretch' }}
allowsFullscreenVideo={true}
scalesPageToFit={true}
/>
You can use react-native-youtube.
You have to embed your video in an iFrame with property.
allowfullscreen="allowfullscreen"
Give iFrame the above mentioned property and for your information allowfullscreen="true" is a wrong input.
How to disable auto play in WebView React Native. because i try WebView to play video in my App still autoplay while i add "mediaPlaybackRequiresUserAction={false}". my code below:
<WebView style={{ justifyContent: 'center', alignItems: 'center'}} source={{uri: url}} mediaPlaybackRequiresUserAction={false} />
Please help me, thanks.
You need to change the property mediaPlaybackRequiresUserAction={true}. Then it will stop the auto play.
Using HTML did the trick.
<WebView
{...this.props}
onError={this.onError}
source={{
html: `
<video width="100%" height="100%" style="background-color:${styles.webView.backgroundColor}" controls>
<source src="${this.props.uri}" type="video/mp4">
</video>
`,
}}
style={this.props.style || styles.webView}
/>
https://stackoverflow.com/a/31956633/1958882
This one worked for me in Android (haven't tested on iOS yet):
<View flex height={300}>
<WebView
source={{ uri: url }}
style={{ flex: 1.0 }}
mediaPlaybackRequiresUserAction={true}
allowsInlineMediaPlayback={true}
javaScriptEnabled={true}
allowsFullscreenVideo={true}
domStorageEnabled={true}
injectedJavaScript={`
document.getElementsByTagName("video")[0].removeAttribute("autoplay"); // this one was the key for me!
`}
allowFileAccess={false}
startInLoadingState={true}
startInLoadingState={<Loaders.spinner />}
/>