Webpackを使用してReactでローカルビデオを読み込む方法は？

Question

私はローカルのファイルから反応するアプリケーションでレンダリングするhtml5ビデオを取得する方法を理解できないようです。文字通り、私は仕事にこれを取得することができた唯一の方法は、このようなものです：

<video src="http://www.w3schools.com/html/movie.mp4" controls /> 

ここで私が直接

<video src={require('path/to/file.mp4')} controls /> 

パスを含む

1.を試みたものです

これはエラーを返します

Module parse failed: /path/to/file.mp4 Line 1: Unexpected token ILLEGAL 
You may need an appropriate loader to handle this file type. 

これはブラウザ

GET http://localhost:3000/530c2bf99dad0f857d46940b62b84946.mp4 404 (Not Found) 

---

に次のエラーを吐き出すWebPACKのコンフィグ

{ 
    test: /\.(mp4)$/, 
    loader: 'file' 
    // loader: 'url-loader' 
    // loader: 'url-loader?limit=100000' 
    // loader: 'file-loader' 
    // loader: 'file-loader?name=videos/[name].[ext]' 
}, 

に一度にこれらローダーいずれかを追加

---

直接URLをファイルに追加しようとしました

<video src={require('http://localhost:3000/path/to/file.mp4')} controls /> 

それでもエラー：

Module not found: Error: Cannot resolve module 'http://localhost:3000/path/to/file.mp4' in path/to/file.mp4 

---

4.私は私のWebPACKの設定like this person did

{ 
    test: /\.jpe?g$|\.gif$|\.png$|\.ico|\.svg$|\.woff$|\.ttf$|.mp4$/, 
    loader: 'url-loader?limit=8192' 
} 

が、運

---

でMP4の拡張子を追加してみました

5.私はwebpack-isomorphic-toolsの実装を開始しましたが、これが正しい方向であるかどうかはわかりませんでしたので、私はそれを一時停止しました。この男はこのように働いているようです。 （see file）

---

私はまたfile-loaderは、ビデオファイルをロードすることloader conventions下のWebPACKのマニュアルに気づきました。 これは、webpackが.mov, .vob, .avi, etc.のような他のビデオタイプをロードしないことを意味しますか？

コードをご覧になりたい場合はhere's the repositoryです。

---

リソース

• Webpack Docs: Loader Conventions
• Add a WebM and MP4 loader to the default Webpack config
• Loading mp4 video in to video tag w/ File loader
• Unable to load resources via file-loader

Answer 1

私は同じ問題を抱えていた、私の解決策は次のとおりです。

それはhttps://github.com/webpack/html-loaderとhttps://github.com/webpack/url-loaderを使用しています：

ローダー構成：

loaders: [{ 
     test: /\.html$/, 
     loader: 'html-loader?attrs[]=video:src' 
    }, { 
     test: /\.mp4$/, 
     loader: 'url?limit=10000&mimetype=video/mp4' 
    }] 

とHTMLで：

簡単なビデオタグ、思い出してくれるwebpackは、htmlファイルを参照するパスを使用します。

<video src="../../../assets/videos/cover1.mp4"></video> 

これは私に役立ちます。

参考文献： https://github.com/webpack/html-loader/issues/28