从 Firebase 存储中获取视频时使用 React 的空白页面

Question

从 firebase 存储中获取背景视频后，我试图在我的网络应用程序上显示它。代码看起来像这样：

import React, { useState, useEffect } from "react";
import { storage } from "../firebase";
const videoRef = storage.ref().child('<filename>');

export default function Dashboard() {
    const [videoURL, setVideoUrl] = useState('');

    useEffect(() => {
        videoRef.getDownloadURL().then((url) => {
            setVideoUrl(url);
        });
    }, []);
    return (
        <div>
            <video width="400" autoPlay muted loop>
                <source src={videoURL} type="video/mp4"/>
                Your Browser does not support HTML video.
            </video>
        </div>
    );
}

生成的页面是空白的，但通过开发工具检查该元素会显示具有正确 url 的视频元素。事实上，如果我只是复制 url 并将其硬编码为 src，它就可以正常工作。我假设有一些与 React 相关的问题在更新 url 后没有刷新，但到目前为止我还没有找到解决方案。

Answer 1

尝试在 useEffect 的依赖数组中添加 videoRef。

Answer 2

你应该尝试使用一个组件来做到这一点。

我发现react-player非常好用。

https://www.npmjs.com/package/react-player

用法示例：

import React from 'react'
import ReactPlayer from 'react-player'

// Render a YouTube video player
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' />

Answer 3

当视频 URL 可用时，您需要呈现 <video> 标记。

return (
    <div>
        {!!videoURL && (
            <video width="400" autoPlay muted loop>
                <source src={videoURL} type="video/mp4"/>
                Your Browser does not support HTML video.
            </video>
        )}
    </div>
);

从 Firebase 存储中获取视频时使用 React 的空白页面

Blank Page with React when fetching video from Firebase Storage

video

reactjs

firebase-storage