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

Posted 2023-02-25

【中文标题】React-native-video 不显示视频播放器

【英文标题】：React-native-video not showing the video player

【发布时间】：2018-09-26 05:13:33

【问题描述】：

我正在使用 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%',
  

【参考方案1】：

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

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

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

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

Please refer this link for further

【讨论】：

按照给定链接npmjs.com/package/react-native-video中的“用法”示例。如果它不起作用，请按照步骤发布您的错误

问题是它没有显示任何错误，只是由于那个 css 而出现了一个空格

有什么事吗？ @桑迪

@Eshant Bist 抱歉，我尝试在 EOD 内向您发送一些解决方案

【参考方案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,
,

希望对你有帮助。

【讨论】：

问题是关于播放 Youtube 视频。默认情况下，它将播放 MP4 格式。