代码之家 › 专栏 › 技术社区 › Rebrado

从Firebase存储中获取视频时带有React的空白页

firebase-storage video reactjs

0

Rebrado · 技术社区 · 4 年前

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

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

3 回复 | 直到 4 年前

1

2

First Arachne 4 年前

<video> 当videoURL可用时标记。

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

2

0

Daniel Silva 4 年前

3

0

Elvis Pesconi 4 年前

你应该试着用一个组件来做这件事。

我发现react播放器很容易使用。

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' />