如何在 React Native 中显示来自 S3 存储桶的视频？答案

【问题标题】：How to display a video from an S3 bucket in React Native?如何在 React Native 中显示来自 S3 存储桶的视频？
【发布时间】：2020-12-03 01:06:53
【问题描述】：

我正在尝试从 S3 存储桶下载视频并将其传递给 Expo 的 Video component。我正在使用s3.getObject() 和回调函数将对象作为ArrayBuffer 获取。但我不知道从这一点上如何使用这些数据。我尝试连接 "data:video/mp4;base64," + videoData.body 并将其作为对象传递。我还尝试将其转换为Base64String，但也没有用。

let videoData = {}
const downloadIntro = async () => {

  s3.getObject(bucketParams, function (err, data) {
    if (err) {
      console.log("Error:" + err)
    } else {
      console.log(data.ContentLength)    // 1210362
      console.log(data.ContentType)      // video/mp4
      console.log(data.Metadata)         // Object {}
      console.log(data.Body.buffer)      // ArrayBuffer []
      videoData.body = data.Body.buffer
    }
  })
}

export default function App() {

  let [vidData, setVidData] = useState(null)

  const playVideo = () => {
    console.log("Trying to play")
    setVidData({video: "data:video/mp4;base64," + videoData.body})
  }

  return (

    <SafeAreaView style={styles.container}>

      <Button title={"Load Video"} onPress={downloadIntro}/>
      <Button title={"Start"} onPress={playVideo}/>

      <Video
        source={vidData}  
        rate={1.0}
        volume={1.0}
        isMuted={false}
        resizeMode={"contain"}
        shouldPlay={paused}
        isLooping={false}
        style={{
          width: 300,
          height: 300
        }}
      />

    </SafeAreaView>

  );
}

【问题讨论】：

什么类型的视频？这是 HLS、DASH、MP4...？
@BentOnCoding MP4
什么视频引擎（shaka、dash.js 等）？您应该能够将资产的 url 设置为视频源或将其传递给您的视频引擎。除非您正在构建自己的视频引擎。

标签： react-native amazon-s3 expo arraybuffer

【解决方案1】：

您似乎正在尝试将原始视频数据放入源中。尝试将属性设置为视频的 url：

<video controls width="250">

    <source src="/media/cc0-videos/flower.mp4"
        type="video/mp4">

</video>

【讨论】：