0

I have a simple component that is supposed to play a video. It shows a black screen with controls but the video is not playing. What am I missing here?

import React from 'react';

export default class CustomVideoPlayer extends React.Component {

    render() {
        return (
            <div className="custom-video-player">
                <video autoPlay controls width="600" height="400" src="video.mp4">
                </video>
            </div>
        )
    }
}

video.mp4 is the in the same folder as CustomVideoPlayer. I've tried adding autoPlay, type attributes but it makes no difference

jjkl
  • 353
  • 6
  • 15
  • 1
    Since your files will be built and bundled, the relative path of `video.mp4` will not actually accurately reflect the file path after building. See how you should import static assets in react: https://create-react-app.dev/docs/adding-images-fonts-and-files/ – Terry Apr 11 '20 at 14:47
  • at the top of the page `import myVideo from "video.mp4"` then `src={myVideo}` – Yosef Tukachinsky Apr 11 '20 at 14:49
  • @Terry that works with images but doesn't seem to work with videos. I tried adding both `import myVideo from './video.mp4'` and `import myVideo from 'video.mp4'` without success. I get the error: `Cannot find module './video.mp4'` – jjkl Apr 11 '20 at 19:31
  • Make sure your `file-loader` actually does include mp4 videos: https://stackoverflow.com/questions/45645675/webpack-3-locates-mp4-file-but-video-is-not-playable – Terry Apr 11 '20 at 21:49

1 Answers1

0

I doubt this is the preferred way to do it but I managed to get it working doing the following: 

import React from 'react';

export default class CustomVideoPlayer extends React.Component {

    render() {
        return (
            <div className="custom-video-player">
                <video controls width="600" height="400" src={require('./video.mp4')}>
                </video>
            </div>
        )
    }
}
jjkl
  • 353
  • 6
  • 15