Does not load video tag [ HTML ]

Asked

Viewed 72 times

0

I can’t upload video to my React application. I’m using Chrome but I also tested it in Safari. It only generates a white screen. The tag is recognized because when I use Controls it enables. But the white screen remains there without at least replacing the poster set.

I’ve looked at all the tutorials, other posts, tried different videos, webM, mp4, everything and it doesn’t work. The code seems to be totally correct. Somebody out there has been there?

Follows code:

import React from 'react';

//import { VideoContainer } from './style';

const Main = () => {
    return (
        <video autoplay muted loop //controls="controls"
         style={{ 
            //objectFit: "cover",
            width: "100vw",
            height: "100vh",
            position: "fixed",
            top: "0",
            left: "0",
            zIndex: 10,
            border: "10px solid green" 
         }}
        >
            <source src="backgroundIII.mp4" type="video/mp4" />
            Vídeo não suportado
        </video>
    );
};

export default Main;

1 answer

0

The source is not locating backgroundIIII.mp4

Put the video in the folder public.

Ai modifies the source:

<source src={process.env.PUBLIC_URL + '/backgroundIII.mp4'} type="video/mp4" />

Browser other questions tagged

You are not signed in. Login or sign up in order to post.