Non riesco a capire come ottenere un video html5 per il rendering in un'applicazione reattiva da file locali. Letteralmente l'unico modo sono stato in grado di ottenere questo al lavoro è come questo:Come caricare un video locale in React usando il webpack?
<video src="http://www.w3schools.com/html/movie.mp4" controls />
Ecco che cosa ho provato
1. Compreso il percorso direttamente
<video src={require('path/to/file.mp4')} controls />
che restituisce un errore
Module parse failed: /path/to/file.mp4 Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
2. aggiunta di queste pale uno alla volta alla webpack config
{
test: /\.(mp4)$/,
loader: 'file'
// loader: 'url-loader'
// loader: 'url-loader?limit=100000'
// loader: 'file-loader'
// loader: 'file-loader?name=videos/[name].[ext]'
},
questo sputare il seguente errore nel browser
GET http://localhost:3000/530c2bf99dad0f857d46940b62b84946.mp4 404 (Not Found)
3. Ho provato ad aggiungere un URL diretto al file
<video src={require('http://localhost:3000/path/to/file.mp4')} controls />
ma ancora errori:
Module not found: Error: Cannot resolve module 'http://localhost:3000/path/to/file.mp4' in path/to/file.mp4
4. Ho provato ad aggiungere l'estensione mp4 nel mio webpack config like this person did
{
test: /\.jpe?g$|\.gif$|\.png$|\.ico|\.svg$|\.woff$|\.ttf$|.mp4$/,
loader: 'url-loader?limit=8192'
}
ma senza fortuna
5. Ho iniziato a implementare webpack-isomorphic-tools ma non ero sicuro che fosse la direzione giusta, quindi mi sono soffermato su di esso. Sembra che questo ragazzo abbia funzionato in questo modo. (see file)
Ho anche notato nella documentazione webpack sotto loader conventions che file-loader
caricherà i file video. Ciò significa che Webpack non caricherà altri tipi di video come .mov, .vob, .avi, etc.
?
Se si vuole dare un'occhiata al codice, here's the repository.
Risorse
- 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
"? Questo significa webpack non caricare altri tipi di video, come .mov, vob, avi, etc." --- non significa che: al webpack non importa come si abbinano i nomi dei file non appena passa 'test'. – zerkms
Penso che il tuo 'test' regex sia sbagliato. Prova '/ \. (Png | jpg | jpeg | gif | svg | mp4) $ /'. – Dai
@Dai cosa c'è che non va? – zerkms