在 React Native 中播放 Amazon S3 cloudefront 视频

Question

有没有办法将托管视频从亚马逊播放到 React Native 应用程序？我尝试过使用React Native Af视频播放器，但无法播放。

视频网址是这样的：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

请在这方面帮助我。

Answer 1

你可以使用react-native-video。

我曾参与过为视频提供签名网址作为列表的项目。这些网址可以使用这个 pacakge 进行流式传输/播放。

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

PS：我也怀疑s3 urls可能无法使用反应原生视频播放，但事实证明，提供签名的URL视频将起作用。 您可以使用onError来调试问题。（在 ernp 上测试之前，请确保网址是从 chrome 播放的）

示例代码

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