I am using react-native-video package to get video player in which i can play my youtube videos.
I tried this but only a empty space was coming instead of a video player.
import Video from 'react-native-video';
<Video source={{uri: 'https://www.youtube.com/watch?v=Gh2FaDqZp2g'}}
ref={(ref) => {
this.player = ref
}}
onBuffer={this.onBuffer}
onEnd={this.onEnd}
onError={this.videoError}
style={styles.backgroundVideo} />
style:
backgroundVideo: {
height:300,
width:'100%',
}
I think Video tag will accept Uri ending with .mp4 format..
Please replace your uri with this http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4
(Note: Some other uri can also be used with same format) and checkout.
But for streaming Youtube videos you will have to use react-native-youtube and Youtube API Component.
Please refer this link for further
I see there some problems in your code:
1/ uri: please replace by this link: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4"
source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}
2/ Your style: as I remember width: '100% does not work, you should set it to a specific number. Or you can make video container view wraps the video view
<View style={styles.videoContainer}>
<Video
source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}
ref={(ref) => {
this._player = ref
}}
...
style={styles.video}/>
</View>
View style:
videoContainer: {
flex: 1,
backgroundColor: 'black',
},
video: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
},
Hope this can help you.
Video is not showing because of these conditions required by IOS and react-native
URL passed on uri must be "HTTPS" to run on ios because by default these are configured to https
To run HTTP Video file you need to make these changes on info.plist file as mentioned on below image from doc of the package
So add the following snippet in the ios/Project-Name/info.plist file under dict XML, This way you will opt out the App Transport Security by apple.
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
It is not recommended to opt out of App Transport Security since Apple plans to require App Transport Security starting 1 January 2017, But if you want you can
For more information refer to this article
https://cocoacasts.com/how-to-add-app-transport-security-exception-domains
If loading from local file system of project use require('path')
directly on source prop. Ex -
source={require('../../assets/videos/test_video.mp4')}
Hope this will help you or somebody else.
Thanks!
it's very clearly mentioned in library that you have to use .mp4 file, in my case .mp4 file url was also not working for android 10 and 11 so i have tried below solution and it worked for me.
still you can try this solution as it works for me try to change your react-native.config.js file with the following code
hope this will work for you
module.exports = {
dependencies: {
'react-native-video': {
platforms: {
android: {
sourceDir: '../node_modules/react-native-video/android-exoplayer',
},
},
},
},
};
Related
I'm new to React Native, coding an app for web and android. On web, my images display fine. On Android, some of them don't show. jpgs etc display fine but the images I need are .avif and they do not. Just a blank space shows in place of the image.
const imageSrc = "https://grocer-img.sgp1.cdn.digitaloceanspaces.com/products/4781330397012883.avif"
<Image source={{
uri: imageSrc,
}}
style={styles.productImage}
resizeMethod="resize"
></Image>
productImage: {
width: "90%",
aspectRatio: 1,
}
Does anyone know how I can get my images to work on both web and android?
I've tried using a locally stored .avif to test and that doesn't work either.
If you are testing with Android OS less than version 12, the AVIF image format is not supported - https://developer.android.com/about/versions/12/features#avif
I'm working on a react native CLI, pure JavaScript eCommerce mobile application that requires users to upload a short video of 30 seconds. The design is that you upload and preview the video before sending it to the API.
What is the best package to use for this?
I'm using react-native-image-picker to pick both the video and the image. I couldn't preview videos using react-native-video nor was I able to preview them using react-native-webview I could only preview images using react native Image component.
Below is the code
The function that uploads the video using react-native-image-picker
const onUploadVideo = async() => {
try {
const fileManager = await launchImageLibrary({
mediaType: 'video',
presentationStyle: 'popover',
quality: 1,
});
let assets = fileManager.assets;
setImages({...assets[0]});
} catch (e) {
console.log('On Edit Image Error', e);
}
};
The code that previews the video is like this;
import Video from 'react-native-video';
<Video source={{ uri: video.videoUrl }} />
Where the video.videoUrl is the Image Picker uri to the local file on the device
I also tried
import { WebView } from 'react-native-webview';
<WebView
javaScriptEnabled={true}
source={{ uri: 'https://youtu.be/nfiwGGn_kC0' }}
style={styles.container}
onHttpError={error => {
console.log(error);
}}
/>
I haven't got any luck!
Tried with multiple prefix urls: (FINAL_URL = PREFIX_URL+DOCUMENT_URL)
Prefix urls:
https://drive.google.com/viewerng/viewer?embedded=true&url=
https://docs.google.com/viewer?url=
I used react-native-webview for this
<WebView
source={{
uri: `${PREFIX_URL}${attachmentUrl}`
}}
javaScriptEnabled={true}
cacheEnabled={false}
startInLoadingState={true}
/>
Did you share the document with a setting allowing anyone with a link to view it? It might be that you simply have to be logged into google drive to view it.
You can test it by opening the URL in an incognito tab
I'm creating an app using React-Native. I'm using Webview in order to display a local html file in the app. This works perfectly when the phone has internet connection, but otherwise nothing is shown. Is it possible to have Webview display a local HTML file without internet connection?
Webview code:
WebView
source={{ uri: 'file:///android_asset/test.html' }}
/>
Try -
const debugSource = require('../assets/test.html'); // required for bundling
const releaseSourcePrefix = Platform.OS === 'android' ? 'file:///android_asset' : './assets';
const releaseSource = { uri: `${releaseSourcePrefix}/assets/index.html` };
const webViewSource = Image.resolveAssetSource(global.__DEV__ ? debugSource : releaseSource);
<WebView
scalesPageToFit={false}
source={webViewSource}
originWhitelist={["*"]}
style={{ flex: 1, }}
/>
Make sure you start with printing Text in HTML first to make sure there is no issue in the HTML file. It will help you to debug faster
I want to show the cover page of a pdf. But I don't know how to proceed. I have the URL of the pdf file and I want to display the front page like an image. I am using the pdf library but I don't know how to proceed.
I was also looking for the same a few days ago and found solution for it.
You can use this package:https://pub.dev/packages/pdf_render
you can use it like this in your widget:
import 'package:pdf_render/pdf_render_widgets2.dart';
...
PdfDocumentLoader(
assetName: 'assets/hello.pdf',
filePath: 'path of the file in local storage',
pageNumber: 1,
pageBuilder: (context, textureBuilder, pageSize) => textureBuilder()
)
In the pdf_thumbnail package, it uses pdfx package to get every single page.
Relevant line in the library.
final page = await document.getPage(pageNumber);
final pageImage = await page.render(
width: page.width,
height: page.height,
);
images[pageNumber] = pageImage!.bytes;
await page.close();
There is a sample Futter wrapper for a PDF SDK here https://github.com/PDFTron/pdftron-flutter. And a corresponding blog: https://www.pdftron.com/blog/flutter/build-a-document-viewer-in-flutter/