在 React Native 中播放 Amazon S3 cloudefront 视频 [英] Play Amazon S3 cloudefront video in React Native

问题描述

有没有办法将托管视频从 Amazon 播放到 React Native 应用程序?我曾尝试使用 React Native Af 视频播放器，但无法播放.

Is there a way to play hosted video from Amazon to React Native application? I have tried with React Native Af Video player but could not play it.

在视频URL是这样的: https://d3codsxyyh2kcu.cloudfront.net/https?Expires=1547218475&Signature=MqxFm4cvR2IYfruCKEaM9JvaFDa7a-0ipdhK9QLxiRFIDcc1jHgvrpNLaPdId1nK5EXJND9hIGnAZvevdRhkA9Uocmd-I3QRdPNumv2BCuSBARgiMcu~lnwgQ24G9r1uO〜ZlQ5CDhPTyJYFqC8DyFuzbGnHrTRfMTfPYIUZSi5lvk22oXGDOqARra〜-KoAKk-vPXAxxUo1BjCXw3V06t6JNxCCrhaGiS3〜OaRc28wGSRacm7F5A9rf〜eEWSUWQ〜17lUC-Jm6jnWAI9zqSqtyIk4ladboX7FNFi8N12wq39KWinYqvhMNkJcmxy1lGLCgEbabndfJc〜yez7c2d17〜RW __&安培;密钥对-ID = my_key_id

The video URL is like this: https://d3codsxyyh2kcu.cloudfront.net/https?Expires=1547218475&Signature=MqxFm4cvR2IYfruCKEaM9JvaFDa7a-0ipdhK9QLxiRFIDcc1jHgvrpNLaPdId1nK5EXJND9hIGnAZvevdRhkA9Uocmd-I3QRdPNumv2BCuSBARgiMcu~lnwgQ24G9r1uO~ZlQ5CDhPTyJYFqC8DyFuzbGnHrTRfMTfPYIUZSi5lvk22oXGDOqARra~-KoAKk-vPXAxxUo1BjCXw3V06t6JNxCCrhaGiS3~OaRc28wGSRacm7F5A9rf~eEWSUWQ~17lUC-Jm6jnWAI9zqSqtyIk4ladboX7FNFi8N12wq39KWinYqvhMNkJcmxy1lGLCgEbabndfJc~yez7c2d17~Rw__&Key-Pair-Id=my_key_id

请在这方面帮助我.

推荐答案

你可以使用 反应原生视频.

我从事过为视频提供签名网址作为列表的项目.这些 url 可以使用这个包进行流式传输/播放.

I have worked on projects that provides signed url for videos as list. These urls can be streamed / played using this pacakge.

唯一需要注意的是您需要生成签名的 S3 网址，以便轻松播放视频.检查这一点的一种方法是，您可以直接将签名网址复制粘贴到浏览器上，它应该立即流式传输.

Only thing to note is you need to generate signed S3 url so that video will play easily. One way to check this is you can directly copy paste the signed url on the browser and it should stream right away.

PS:我也怀疑 s3 url 可能无法使用 react-native-video 播放，但事实证明，提供 signedUrl 视频是可行的.您可以使用 onError 调试问题.(在 eu 在 RNApp 上测试之前，请确保 url 是从 chrome 播放的)

PS: I also had doubts that s3 urls might not be playable using react-native-video, But turns out, providing signedUrl video will work. you can use onError to debug issues. (Make sure the url is playing from chrome before eu test it on RNApp)

示例代码

// Load the module

import Video from 'react-native-video';



<Video source={{uri: "s3 signed url"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
       onBuffer={this.onBuffer}                // Callback when remote video is buffering
       onError={this.videoError}               // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

这篇关于在 React Native 中播放 Amazon S3 cloudefront 视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！