CODEWITHSUNDEEP
reactjsvideofirebase-storage
Rebrado
Rebrado

Reputation: 71

Blank Page with React when fetching video from Firebase Storage

I am trying to display a background video on my web app after fetching it from firebase storage. The code looks something like this:

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

The resulting page is blank, but inspecting the element via dev tools shows the video element with the correct url. In fact, if I just copy the url and hard code it as src it works just fine. I assume there is some issue related to React not refreshing after updating the url but I haven't found a solution so far.

Upvotes: 3

Views: 1103

Answers (3)

First Arachne
First Arachne

Reputation: 829

You need to render <video> tag when the videoURL is available.

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

Upvotes: 3

Elvis Pesconi
Elvis Pesconi

Reputation: 139

You should try to use a component to do that.

i found react-player very easy to use.

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

example of usage:

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

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

Upvotes: 2

Daniel Silva
Daniel Silva

Reputation: 343

Try adding the videoRef inside the dependency array on the useEffect.

Upvotes: 1

Related Questions