Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

94
Visualizações
How can i load local video react application

I am trying to load local video file to my react app. The video file exist in repo itself. I added the path of the video file as mentioned below but video is not loading.


export const Welcome = () => {
  return (
    <>
      <video autoPlay loop muted>
        <source src="src/assets/video/video.mp4" type="video/mp4" />
      </video>

    </>
  );
};

I am new to react world. Any suggestions...

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

You would need to import the local video file to you component.

import myVideo from '../media/M_03292018202006_00000000U2940605_1_001-

class Video extends Component {
   render () {
     return (
      <div className='player-wrapper'>
        <ReactPlayer
          url={myVideo}
          ...
         />
      </div>
    )
   }
 }
about 4 years ago · Juan Pablo Isaza Relatório

0

  1. Try to include the video from the files inside react app:
import videoFile from '../path-to-video.mp4';

export const Welcome = () => {
  return (
    <>
      <video autoPlay loop muted>
        <source src="src/assets/video/video.mp4" type="video/mp4" />
      </video>

    </>
  );
};


  1. Another solution will be locate your video in public folder (within index.html and use the path like this (video is located in public/assets/video/video.mp4):
export const Welcome = () => {
  return (
    <>
      <video autoPlay loop muted>
        <source src="/assets/video/video.mp4" type="video/mp4" />
      </video>

    </>
  );
};


  1. One more is to use absolute path:
export const Welcome = () => {
  return (
    <>
      <video autoPlay loop muted>
        <source src="https://example.com/assets/video/video.mp4" type="video/mp4" />
      </video>

    </>
  );
};

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda