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