web-dev-qa-db-ja.com

ローカルビデオをReactでWebpackを使用してロードする方法は？

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

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

これが私が試したものです

1。パスを直接含める

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

エラーを返します

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

2。これらのローダーを一度に1つずつwebpack構成に追加する

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

これはブラウザで次のエラーを吐き出します

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

3。ファイルに直接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設定にmp4拡張機能を追加してみました この人がしたように

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

運が悪い

5。私は webpack-isomorphic-tools の実装を開始しましたが、これが正しい方向であるかどうかわかりませんでした。一時停止しました。この男はこのように機能しているようです。 （ ファイルを参照 ）

ローダーの規則 の下のWebpackドキュメントでも、file-loaderがビデオファイルをロードすることに気付きました。 webpack documentation image これは、webpackが.mov, .vob, .avi, etc.などの他のビデオタイプをロードしないことを意味しますか？

コードを確認したい場合は、 これがリポジトリです です。

リソース

videoreactjswebpackloaderes6-module-loader
12
Alex Cory

私は同じ問題を抱えていました、私の解決策は：

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で：

シンプルなビデオタグであるremeber webpackは、htmlファイルへの参照パスを使用します。

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

これでうまくいきます。

参照： https://github.com/webpack/html-loader/issues/28

14
Heitor Estrela Gomes