Aplicación.js
import React from 'react'; import ReactDOM from 'react-dom'; import { Menu } from './Menu'; import { Video } from './Video'; const VIDEOS = { fast: require('./videos/bel.mp4'), slow: require('./videos/mimi.mp4'), cute: require('./videos/coco.mp4'), eek: require('./videos/drea.mp4') }; export class App extends React.Component { constructor(props){ super(props); this.state = { src: VIDEOS.fast }; } render() { return( <div> <Menu /> <Video src={this.state.src} /> </div> ); } } ReactDOM.render( <App />, document.getElementById('app') );Vídeo.js
import React from 'react'; export class Video extends React.Component { render() { return( <div> <video controls autoPlay muted src={this.props.src}/> </div> ); } }Menú.js
import React from 'react'; export class Menu extends React.Component { render(){ return( <form> <input type="radio" name="src" value="fast" /> Bella <input type="radio" name="src" value="slow" /> Coco <input type="radio" name="src" value="cute" /> Mimi <input type="radio" name="src" value="eek" /> Drea </form> ); } }Intento crear una pequeña aplicación React para practicar en mi computadora personal, pero el video no se reproduce, no estoy seguro de lo que me estoy perdiendo. El reproductor de video muestra y los botones de opción están visibles, pero el video no se reproduce. Sé que hay más que hacer, pero primero quiero que se reproduzca el primer video, por eso configuré this.state en VIDEOS.fast
Intenta importar los videos como este, ¿quizás?
import bel from './videos/bel.mp4'; import mimi from './videos/mimi.mp4'; import coco from './videos/coco.mp4'; import drea from './videos/drea.mp4'; const VIDEOS = { fast: bel, slow: mimi, cute: coco, eek: drea }; Y luego no olvides el atributo de type en la etiqueta de video
<video controls autostart autoPlay src={bel} type="video/mp4" />El problema más probable es que React no reconozca que está actualizando la fuente de video y no está cargando un video.
Esta es una característica conocida: esencialmente, debe observar un cambio en el src y, cuando lo vea, active una carga del video.
Hay un buen ejemplo en esta respuesta aquí: https://stackoverflow.com/a/47382850/334402