React-native-video不显示视频播放器

I am using react-native-video package to get video player in which i can play my youtube videos.

我正在使用react-native-video软件包来获取视频播放器,我可以在其中播放我的YouTube视频。

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

2 个解决方案

#1

I think Video tag will accept Uri ending with .mp4 format..

我认为Video tag会接受以.mp4格式结尾的Uri。

Please replace your uri with this http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4

请用这个http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4替换你的uri

(Note: Some other uri can also be used with same format) and checkout.

(注意:其他一些uri也可以使用相同的格式)和结帐。

But for streaming Youtube videos you will have to use react-native-youtube and Youtube API Component.

但是要播放Youtube视频,您必须使用react-native-youtube和Youtube API组件。

Please refer this link for further

请参阅此链接以获取更多信息

#2

I see there some problems in your code:

我发现你的代码中存在一些问题:

1/ uri: please replace by this link: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4"

1 / uri:请用以下链接替换:“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

2 /你的风格:我记得宽度:'100%不起作用,你应该把它设置为一个特定的数字。或者您可以使视频容器视图包装视频视图

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

希望这可以帮到你。

#1