Как загрузить локальное видео в React с помощью веб-пакета?

Я не могу понять, как получить видео 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. Добавление этих загрузчиков по одному в конфигурацию веб-пакета

{
  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. Я попытался добавить расширение mp4 в конфигурацию своего веб-пакета как это сделал этот человек

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

но не повезло

5. Я начал внедрять webpack-isomorphic -tools, но тогда я не был уверен, что это правильное направление, поэтому остановился на нем. Кажется, у этого парня все получилось именно так. (см. файл)

Я также заметил в документации веб-пакета в разделе соглашения загрузчика, что file-loader будет загружать видеофайлы. изображение документации веб-пакета Означает ли это, что веб-пакет не будет загружать другие типы видео, такие как .mov, .vob, .avi, etc.?

Если вы хотите взглянуть на код, вот репозиторий.

Ресурсы


webpack reactjs video es6-module-loader loader
person Alex Cory    schedule 07.04.2016    source источник
comment
Означает ли это, что веб-пакет не будет загружать другие типы видео, такие как .mov, .vob, .avi и т. д.? --- это не значит, что: webpack не волнует, как вы сопоставляете имена файлов, как только проходит test.   -  person zerkms    schedule 07.04.2016
comment
Я думаю, что ваше «тестовое» регулярное выражение неверно. Попробуйте /\.(png|jpg|jpeg|gif|svg|mp4)$/.   -  person theaws.blog    schedule 07.04.2016
comment
@Dai, что с этим не так?   -  person zerkms    schedule 07.04.2016
comment
@zerkms Извините, это выглядело избыточным, и последний . не был экранирован, но я не думаю, что это причина проблемы, то есть не так. Что вы получаете в src при использовании решения 4?   -  person theaws.blog    schedule 07.04.2016
comment
@Dai Я не ОП :-) Действительно, . нужно экранировать, но это может привести только к ложным срабатываниям, что на данный момент не проблема.   -  person zerkms    schedule 07.04.2016
comment
попробуйте импортировать свой файл поверх компонента вместо импорта внутри jsx. например: import videoUrl from '/path/to/file.mp4' , а затем внутри jsx поместите <video src={videoUrl} />.   -  person Vikramaditya    schedule 07.04.2016
comment
да, оператор import не сработал. Он по-прежнему выдавал ту же ошибку, что и решение 2.   -  person Alex Cory    schedule 07.04.2016
comment
Я смог заставить его работать, выполняя 1. и 2. вместе. Единственная разница в том, что я сделал var x = require('path/to/video'). Я также использовал name=videos/[name].[ext], может быть связано. Также убедитесь, что вы запускаете и останавливаете веб-пакет, если вы просматриваете файлы.   -  person Patrick Steadman    schedule 14.04.2016

Ответы (2)


arrow_upward
15
arrow_downward

У меня была такая же проблема, мое решение:

Он использует 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:

Простой тег видео, помните, что веб-пакет использует путь, указанный в html-файле.

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

Это работает для меня.

Ссылки: https://github.com/webpack/html-loader/issues/28

person Heitor Estrela Gomes    schedule 20.04.2016
comment
Я предполагаю, что есть опечатка. должно быть loader: 'url-loader?limit.... У меня так работает - person Jamland; 03.01.2018

arrow_upward
0
arrow_downward

Хотя это старый пост, и вопрос конкретно о WebPack...

Если вы используете Typescript и шаблон, такой как create-react-app, и если ваше видео находится в статической папке, ознакомьтесь с этим решением для добавления типа в src/react-app-env.d.ts перед извлечением приложения:

https://github.com/facebook/create-react-app/issues/ 6822

person Liad Magen    schedule 28.10.2020