Search code examples
htmlreactjsloaderwebpack-2

can not find local video by react^15.6.1+webpack2

  {
    test: /\.html$/,
    loader: 'html-loader?attrs[]=video:src'
  },
  {
    test: /\.(jpg|png|gif|svg)$/,
    use: [
      {
        loader: "url-loader",
        options: {limit: 8192}
      }
    ]
  },
  {
    test:/\.mp4$/,
    loader: 'url-loader?limit=10000&mimetype=video/mp4'
  }

This is what I set in webpack.

<video width="100%" height="100%" src="./1.mp4" controls>
     Your browser does not support HTML5 video.
</video>

This is what I write in js.

I use webpack2 and react^15.6.1. It can show vedio's controls but can not find local vedio.

Solution

  • here is the code to add .mp4 file to video

    const videos = {
  test: require("./1.mp4")
};

<video width="100%" height="100%" src={videos.test} controls>
     Your browser does not support HTML5 video.
</video>

    webpack : use file-loader

    {
    test: /\.mp4$/,
    loader: 'file'
}