Am I missing some code to view this video in a react app using visual studio code [react]

Question

App.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')
);

Video.js

import React from 'react';

export class Video extends React.Component {
    render() {
        return(
            <div>
                <video controls autoPlay muted src={this.props.src}/>
            </div>
        );
    }
}

Menu.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>
        );
    }
}

Trying to create a small React app to practice on my personal computer but the video isn't playing, not sure what I am missing. Video player shows and radio buttons are visible but video doesn't play. I know there is more that needs to be done but first I want to have the first video play that is why I set this.state to VIDEOS.fast

you don't have any error message ? the path of the videos is correct ? — VersifiXion, Feb 07 '22 at 23:50
There is no error message, the video just doesn't play, autoplay or when I click play on video — andres casado, Feb 08 '22 at 18:19
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/241832/discussion-between-andres-casado-and-versifixion). — andres casado, Feb 08 '22 at 18:26

score 0 · Answer 1 · answered Feb 07 '22 at 23:54

Try importing the videos like this maybe ?

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
};

And then don't forget the type attribute in the video tag

<video controls autostart autoPlay src={bel} type="video/mp4" />

score 0 · Answer 2 · answered Feb 09 '22 at 13:41

The most likely issue is that React is not recognising that you are updating the video source and is not doing a video load.

This is a known characteristic - essentially you have to watch for a change in the src and when you see it trigger a load of the video.

There is a nice example in this answer here: https://stackoverflow.com/a/47382850/334402

Am I missing some code to view this video in a react app using visual studio code [react]

2 Answers2