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

- Eshant Bist

Answer 1

我认为 Video 标签可以接受以 .mp4 结尾的 Uri 格式。请使用这个 http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4 替换你的 Uri，然后进行检查。

但是，如果要流式播放 YouTube 视频，则必须使用 react-native-youtube 和 Youtube API 组件。

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

- Sandy

---

请按照链接中的“用法”示例 https://www.npmjs.com/package/react-native-video 进行操作。如果无法正常工作，请按照以下步骤进行，并发布您的错误信息。 - Sandy

事情是它没有显示错误，只有一个空白的区域出现了，这是由于CSS导致的。 - Eshant Bist

有什么问题吗？@Sandy - Eshant Bist

@Eshant Bist 抱歉，我会在今天结束前给你发送一些解决方案。 - Sandy

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

希望这可以帮到你。

- Luong Truong

---

问题是关于播放Youtube视频。默认情况下它会播放MP4格式。 - Veer Shrivastav

Answer 3

视频无法显示，因为IOS和React-Native需要满足以下条件

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

要运行HTTP视频文件，您需要根据包文档中下面的图像所述，在info.plist文件中进行以下更改：

因此，在 dict XML 下的 ios/Project-Name/info.plist 文件中添加以下代码片段，这样您就可以通过苹果退出应用程序传输安全性。

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

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

有关更多信息，请参阅本文。

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

如果从项目的本地文件系统加载，请直接在源属性上使用require('path')。例如 -

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

希望这可以帮助你或其他人。

谢谢！

- Aman Kumar Gupta

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

- avaiyakapil