如何在网站上呈现 Firebase 存储视频？答案

【问题标题】：How do I render Firebase Storage videos on a website?如何在网站上呈现 Firebase 存储视频？
【发布时间】：2020-09-30 08:08:28
【问题描述】：

从其他 SO 答案（例如 Firebase Storage: Play back of a video url directly?）中，我了解到 Firebase 不支持视频流，因此我不能只提供我的 URL 的 <video> 元素并期望它播放资源。因此，我将如何在我的网站上显示存储在 Firebase Storage 中的视频？

【问题讨论】：

标签： html reactjs firebase video server

【解决方案1】：

Firebase 存储仅支持文件下载。所以你需要使用getDownloadUrl here:

这就是我在 React 中的做法：

import React, { useEffect, useState } from "react";
import ReactPlayer from 'react-player/lazy';
import { storage } from "../../firebase/fbConfig"

const VideoView = (props) => {
    const [vedio, loadVedio] = useState("");
    const vedioLoader = info => {
        
        storage.ref().child(VIDEO_REF).getDownloadURL().then(function (url) {
            
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';
            xhr.onload = function (event) {
                var blob = xhr.response;
            };
            xhr.open('GET', url);
            xhr.send();
            loadVedio(url)
            console.log(url)
        }).catch((error) => {
            console.log(error)
        })
    }

   return (
    <ReactPlayer id="myVedio"
                            url={vedio}
                            width='100%'
                            height='100%'
                            playing={true}
                            controls={true}
                            volume={1}
                            progressInterval={5000}
                            pip={true}
                        />
)
}

【讨论】：