Can't load local video with React

Question

I can't load a local video with React. I've put the video in my folder "app/assets/video/concert.mp4". In my React file "search_bar.jsx", I have an HTML5 video tag I've sourced the video as:

render(){ return (<video src="../../app/assets/videos/concert.mp4" controls />); }

Here is my file structure:

• MusicianHub
  • app
    • assets
      • videos
        • concert.mp4
  • frontend
    • components
      • search_bar.jsx

The video tag works if you load an external video. Here is my webpack.config.js

 module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
      test: /\.html$/,
      loader: 'html-loader?attrs[]=video:src'
    }, {
      test: /\.mp4$/,
      loader: 'url?limit=10000&mimetype=video/mp4'
    }
    ]
  }

Answer 1

This works for local file:

import videos from '../../app/assets/videos/concert.mp4'

render(){
return (
 <video loop autoPlay>
      <source src={videos} type="video/mp4"/>
 </video>
); }

Answer 2

This is a fix for me. https://github.com/facebook/create-react-app/issues/6822#issuecomment-483079845

You can use src/react-app-env.d.ts to test it out:

declare module '*.mp4' {
  const src: string;
  export default src;
}

Answer 3

I've decided to go with uploading the video to Cloudinary, a remote source instead. Thanks for everyone's help.

Answer 4

This way works for local photos and videos:

import concert from '../../assets/videos/concert.mp4'

render(){
return (
 <video controls>
      <source src={concert} type="video/mp4"/>
      Your browser doesn't support HTML video.
 </video>
); }