CODEWITHSUNDEEP
htmlreactjsfirebasevideoserver
Oliver James
Oliver James

Reputation: 63

How do I render Firebase Storage videos on a website?

From other SO answers (e.g Firebase Storage: Play back of a video url directly?), I understand that Firebase does not support video streaming so I can't just provide a <video> element my URL and expect it to playback the resource. As such, how would I go about displaying videos which are stored in Firebase Storage on my website?

Upvotes: 0

Views: 1572

Answers (1)

Methkal Khalawi
Methkal Khalawi

Reputation: 2477

Firebase storage support only files download. so you need to use getDownloadUrl here:

This is how I do it in 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}
                        />
)
}

Upvotes: 1

Related Questions