9

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%',
  }
Eshant Bist
  • 1,485
  • 3
  • 12
  • 22

4 Answers4

6

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

Sandy
  • 141
  • 1
  • 8
1

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.

Luong Truong
  • 1,953
  • 2
  • 27
  • 46
0

Video is not showing because of these conditions required by IOS and react-native

  1. 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

enter image description here

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

  1. 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!

Aman Kumar Gupta
  • 2,640
  • 20
  • 18
0

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',
        },
      },
    },
  },
};
avaiyakapil
  • 98
  • 8