-- I have a HTML5 video that loads correctly while at localhost (dev environment).
React component
import HomeVideo from '../video/home.mp4';
const Home = () => (
<div className="home-container">
<div className='video-container'>
</div>
<video autoPlay loop>
<source src={HomeVideo} type='video/mp4' />
Your browser does not support the video tag.<a href="https://youtu.be/bgSMpRpObCg" rel="noopener noreferrer" target="_blank">Watch it here</a>
</video>
</div>
</div>
)
export default Home;
npm run build
my webpack -p
process everything.Package.json
"scripts": {
"start": "webpack-dev-server --devtool eval-source-map --history-api-fallback --open",
"build": "webpack -p"
},
src=
shows the webpack build url) Is that the problem?These is how my webpack.config.js is currently written: ps: With or without the commented out lines the behavior is still the same. Works in dev and doesn't work after the build.
const webpack = require('webpack');
module.exports = {
entry: `${__dirname}/src/index.js`,
output: {
path: `${__dirname}/build`,
publicPath: '/build/',
filename: 'bundle.js',
},
module: {
rules: [
//{ test: /\.html$/, loader: 'html-loader?attrs[]=video:src' },
//{ test: /\.(mov|mp4)$/, loader: 'url-loader?limit=10000&mimetype=video/mp4' },
{
test: /\.(mov|mp4)$/, use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { minimize: true } }],
},
{
test: /\.(pdf|jpg|png|svg)$/,
use: {
loader: "file-loader",
options: {
name: "[path][name].[hash].[ext]",
},
},
},
]
},
plugins: process.argv.indexOf('-p') === -1 ? [] : [
new webpack.optimize.UglifyJsPlugin({
output: {
comments: false,
},
}),
],
};
**I don't know if it matters but this is being served at GitHub pages.
Use following web pack config.(uncomment lines bellow, remove the limit from /\.(mov|mp4)
{ test: /\.html$/, loader: 'html-loader?attrs[]=video:src' },
{ test: /\.(mov|mp4)$/, loader: 'url-loader' },
Please check the similar type of question to here.
And also check the more about url-loader and html-loader.
Hope this will help you !!