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

Question

Я не могу понять, как получить видео 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. Добавление этих погрузчиков один на один раз в 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. Я пытался добавить расширение mp4 в моей WebPack конфигурации like this person did

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

, но не повезло

---

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

---

Я также заметил в документации WebPack под loader conventions что file-loader будет загружать видео файлы. Означает ли это, что веб-пакет не загружает другие типы видео, такие как .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:

Простой видеотега, Remeber В webpack используется путь, относящийся к файлу html.

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

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

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