React-native-video not showing the video player

Question

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%',
  }

Dogcatcher

Answer 1

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

Maupin

Follow the "usage" example in the given link npmjs.com/package/react-native-video.. Follow the steps If it's not working post your error – Maupin

The thing is that it is showing up no error just a blank space is coming due to that css – Dogcatcher

So anything came up? @Maupin – Dogcatcher

@Eshant Bist Sorry I try to send you some solutions within EOD – Maupin

Answer 2

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.

Gq

The question is about playing an Youtube video. By default it would play the MP4 format. – Clough

Answer 3

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

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

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

Relent

Answer 4

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',
        },
      },
    },
  },
};

Frontality

Answer 5

We tried Live streaming url in react native player.Audio was working but video was not showing. Here is my Code

    <Video
      ref={videoRef}
      source={{ uri: 'https://www.cbsnews.com/common/video/cbsn_header_prod.m3u8'}}
      style={styles.video}
      controls={true}
      resizeMode="cover"
      autoplay={true}
      paused={!isPlaying} // Use the paused prop to control play/pause state
      onEnd={() => setIsPlaying(false)}
    />

Maturity