Não consigo descobrir como obter um vídeo html5 para renderizar em um aplicativo de reação a partir de arquivos locais. Literalmente, a única maneira de fazer isso funcionar é assim:

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

Aqui está o que eu tentei

1 Incluindo o caminho diretamente

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

que retorna um erro

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

2) Adicionando esses carregadores, um de cada vez, à configuração do webpack

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

isso cuspiu o seguinte erro no navegador

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

3) Tentei adicionar um URL direto ao arquivo

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

mas ainda erros:

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

4) Tentei adicionar a extensão mp4 na minha configuração do webpackcomo essa pessoa fez

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

mas sem sorte

5) Eu comecei a implementarwebpack-isomorphic-tools mas então eu não tinha certeza se essa era a direção certa, então parei nela. Parece que esse cara conseguiu funcionar dessa maneira. (ver arquivo)

Também notei na documentação do webpack emconvenções do carregador estefile-loader carregará arquivos de vídeo.Isso significa que o webpack não carrega outros tipos de vídeo, como.mov, .vob, .avi, etc.?

Se você quiser dar uma olhada no código,aqui está o repositório.

Recursos