Question

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

我尝试过，但是只有一个空白而不是视频播放器。

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} />

样式：

backgroundVideo: {
    height:300,
    width:'100%',
  }

Answer 1

我认为视频标签将接受以.mp4格式结尾的Uri。

请用此http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4

替换您的uri

（注意：某些其他uri也可以使用相同的格式）和结帐。

但是要流式传输Youtube视频，您将必须使用 react-native-youtube 和 Youtube API组件。

Please refer this link for further

Answer 2

我发现您的代码中存在一些问题：

1 / uri：请替换为以下链接：“ http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4”

source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}

2 /您的样式：我记得width: '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>

查看样式：

videoContainer: {
    flex: 1,
    backgroundColor: 'black',
},
video: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
},

希望这可以为您提供帮助。

React-Native-Video未显示视频播放器

2 个答案: