I am loading a Vimeo video using WebView in ReactNative. However, the images do not load (badge and pre-play image). I am using react-native#0.70.5 and react-native-webview#11.23.1, below is the code for my WebView, and screenshots of the video in the emulator vs. directly accessed over the browser url bar.
<WebView
allowsFullscreenVideo={true}
source={{ uri: "https://player.vimeo.com/video/65107797" }}
javaScriptEnabled={true}
scrollEnabled={false}
originWhitelist={["*"]}
style={{ height: 300 }}
/>
Screenshot of video in iOS emulator:
Screenshot of video in the browser:
Related
I want to play some YouTube videos in my react native app using a native player as we don't want to show youtube branding in the player. Is there any possible way to do this?
If not, what's the best way to play youtube videos in react native app without showing youtube branding?
You can do this using react-native-webview.
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
scrollEnabled={false}
source={{
uri: `${"YOUR YOUTUBE URL"}?controls=0&showinfo=0&wmode=transparent&rel=0&mode=opaque`,
}}
style={{
height: 200,
width: Dimensions.get('window').width - 80,
}}
onError={(err) => {
console.log(err, 'this is errr');
}}
/>
Postman or android devices play it nicely, but on iOS platform we are facing the problem. Basically, a user logs in the application and makes a call to API service which returns the mp4 video.Postman header info is also attached. Any help is appreciated.
code is
<Video
source={{
uri: "https://api.xxxx.org/v1/files/7afbd0c3-ab0e-4cfb-910a-10c058a07b20"
}}
// Can be a URL or a local file.
controls={true}
fullscreen={true}
resizeMode="contain"
ref={(ref) => {
this.player = ref
}}
/>
postman result is here
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.
We are using
react-native: 0.59.9,
react-native-wkwebview-reborn: ^2.0.0,
and loading the WKWebView Component like this:
<WKWebView
source={{
file: RNFS.LibraryDirectoryPath+'/ICFPackage/ICFPackage/index.html',
allowingReadAccessToURL: RNFS.LibraryDirectoryPath
}}
originWhitelist={'["*"]'}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
scrollEnabled={false}
onLoad={() => this.sendPostMessage()}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
allowsInlineMediaPlayback={true}
mediaPlaybackRequiresUserAction={true}
/>
Since allowsInlineMediaPlayback is unsupported by wkwebview video is taking full screen while playing, Kindly guide me how to support the allowsInlineMediaPlayback in wkwebview.
Trying to display an image within a WebView in ReactNative (Using Expo). Doing this to allow image zooming.
Using webview with source={{ uri: this.state.imageUrl }} which is an s3 bucket image location. ie-- ending in .jpg
I have set mixedContentMode to 'always' as is suggested by people with similar problems, along with setting javascriptEnabled and domStorage to true, setting style to flex:1 etc etc.
My android is displaying a white page only, but iOS displays the image just fine, so url is not the problem.
I know RN advertises Webview as being soon to be deprecated and to use react-native-webview. But as we use Expo this isn't an option as linking is required to use react-native-webview which cannot be done with expo.
Is there something I have missed with s3 buckets or has anyone else had a similar issue they have managed to solve this issue? Not sure what else to try, have used the trick with google drive prefix elsewhere in the app for displaying PDFs in the webview but that doesnt work in this case. And using mixedContentMode hasn't solved anything.
<WebView
source={{ uri: this.props.map.source }}
startInLoadingState
javaScriptEnabled
style={{ flex: 1}}
scalesPageToFit
javaScriptEnabled
domStorageEnabled
originWhitelist={['*']}
mixedContentMode='always'
/>
and example of the image url is 'https://example-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:example/public/image-hd-1.jpg'
just showing the format.. above url will not work
In the end I just used the WebView and inserted my own html with an img tag that references the exact same image url. This seems to work just fine and gets around what ever issue was occurring with referencing the image directly.
Would still like to know if anyone has gotten around this without having to perform different renders for different operating systems.
Did you try to wrap it in view? Because in my one of an old project I solved it like this
<View style={{flex:1}}>
<View style={{height:'100%',width:'100%'}}>
<WebView
source={{ uri: 'https://github.com/facebook/react-native' }}
scalesPageToFit={true}
startInLoadingState={true}
javaScriptEnabled={true}
domStorageEnabled={true}
originWhitelist={['*']}
mixedContentMode='always'
/>
</View>
</View>
Here is the Snack Link