13

ローカル ファイルから反応アプリで 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ドキュメントにも気付きました。 これは、webpack が などの他のビデオ タイプをロードしないことを意味しますか?file-loaderwebpack ドキュメント イメージ.mov, .vob, .avi, etc.

コードを確認したい場合は、ここにリポジトリがあります。

資力

4

2 に答える 2