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

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

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

请用此替换您的 uri http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4

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

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

请参阅此链接了解更多

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

希望这可以帮助你。

Answer 3

由于 IOS 和 React-native 所需的这些条件，视频无法显示

1. 在 uri 上传递的 URL 必须是“HTTPS”才能在 ios 上运行，因为默认情况下这些配置为 https

要运行 HTTP 视频文件，您需要对 info.plist 文件进行这些更改，如下面包文档中的图片所述

因此，在 dict XML 下的 ios/Project-Name/info.plist 文件中添加以下代码片段，这样您就可以选择退出 Apple 的 App Transport Security。

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

不建议选择退出应用程序传输安全，因为 Apple 计划从 2017 年 1 月 1 日开始要求应用程序传输安全，但如果您愿意，也可以

更多信息请参阅这篇文章

https://cocoacasts.com/how-to-add-app-transport-security-exception-domains

2. 如果从项目的本地文件系统加载，请使用 require('path') 直接在源道具上。前-

源={require('../../assets/videos/test_video.mp4')}

希望这会对您或其他人有所帮助。

谢谢！

Answer 4

库中非常明确地提到您必须使用

.mp4

文件，在我的情况下，.mp4文件url也不适用于android 10和11，所以我尝试了下面的解决方案，它对我有用。

您仍然可以尝试这个解决方案，因为它对我有用尝试使用以下代码更改您的

react-native.config.js

文件

希望这对你有用

module.exports = {
  dependencies: {
    'react-native-video': {
      platforms: {
        android: {
          sourceDir: '../node_modules/react-native-video/android-exoplayer',
        },
      },
    },
  },
};

Answer 5

我们在 React Native 播放器中尝试了实时流媒体 URL。音频正常工作，但视频未显示。 这是我的代码

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