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

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

firebase-storage video reactjs

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 年前

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

Daniel Silva 4 年前

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

推荐文章

Angulandy2 · Angular 2 firebase如何将变量传递给另一个函数?

7 年前

VivekRajendran · 脱机时Glide无法从firebase存储中获取最新照片

7 年前

Danish Ajaib · 如何将资产读取到inputFileStream?

7 年前

Xerri · Angularfire2 v5中捕获错误

7 年前

Werokk · 将图像上载到firebase存储

7 年前

ttches · 使用云数据库是否会增加带宽

7 年前

Martin Bories · Firebase函数-错误,但控制台中没有事件消息

7 年前

Christoph · Firebase存储病毒检查

7 年前

Hemanth · 在Android中,是否可以使用URL而不是SDK将图像上载到firebase存储?

7 年前

JP Lew · 如何访问节点上函数内部的Firebase存储。js服务器?

7 年前