Estoy tratando de incrustar un video LOCAL en un fondo div en React pero no funciona. De hecho, cuando inserto un video URL, funciona, pero no desde un archivo LOCAL. ¿Hay algo especial para que este video de fondo funcione en React?
Resultados
HACER TRABAJO --> https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
NO FUNCIONA --> ./assets/videos/show.mp4 (la ruta es correcta)
EDITAR: inserté la propiedad de controles y descubrí que el video existe, pero se reproduce en una pantalla en blanco. Cualquier ayuda sería apreciada.
.video-container { height: 100vh; position: relative; width: 100vw; } .video-container video { height: 100%; object-fit: cover; position: fixed; width: 100%; z-index: 0; } <div className="video-container"> <video autoPlay muted loop id="video"> <source src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'} type="video/mp4" /> </video> </div>Aparentemente, este es un problema de resolución de rutas con la compilación NodeJS y React. Intenta importar tu video como:
import myVideo from './assets/videos/show.mp4'; <div className="video-container"> <video autoPlay muted loop id="video"> <source src={myVideo} type="video/mp4" /> </video> </div>Si esto no funciona, intente poner el video dentro de la carpeta pública, esto permitirá que el video esté disponible después de la compilación de React.
En primer lugar, gracias a todos los que intentaron ayudarme.
Después de insertar "controles" para el atributo de video, noté que el video se estaba reproduciendo en segundo plano, pero solo EN BLANCO (video blanco con controles). Seguí algunas instrucciones de otra publicación para configurar el 'cargador de archivos' para el formato mp4. Lo hice, pero después del procedimiento todavía no funcionó.
Webpack 3 localiza el archivo .mp4 pero el video no se puede reproducir
Luego, rendericé un nuevo archivo de video y luego trabajé. Así que no puedo identificar claramente la fuente del problema. Supongo que sucedió algo la primera vez que rendericé el archivo, probablemente fue el FORMATO DE VIDEO.
Para la representación de archivos utilicé: Kdenlive para Linux Video HD 1080p 25 fps formato de representación: Genérico (HD para web) > MP4-H264/AAC
Espero que esto pueda dar un nuevo enfoque para aquellos con el mismo problema.