Wie lade ich ein lokales Video in React mit dem Webpack?

Question

Ich kann nicht herausfinden, wie man ein HTML5-Video in einer Reaction-App aus lokalen Dateien rendern kann. Wahrsten Sinne des Wortes der einzige Weg, ich in der Lage gewesen sind, dies zu Arbeit zu bekommen, ist wie folgt:

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

Hier ist, was ich versucht habe

1. Einschließlich der Weg direkt

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

, die einen Fehler zurückgibt

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

---

2. diese Lader zu einer nach dem anderen auf die webpack Config Hinzufügen

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

dies im Browser den folgenden Fehler ausspucken

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

---

3. Ich habe versucht, eine direkte URL in die Datei

hinzuzufügen

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

aber noch Fehler:

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

---

4. habe ich versucht, like this person did

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

aber kein Glück die mp4-Erweiterung in meinem webpack Config Hinzufügen

---

5. Ich fing an, webpack-isomorphic-tools zu implementieren, aber dann war ich nicht sicher, ob das die richtige Richtung war, also pausierte ich darauf. Es sieht so aus, als ob der Typ es so funktioniert hat. (see file)

---

Ich bemerkte auch in der webpack Dokumentation unter loader conventions dass file-loader Video-Dateien geladen werden. Bedeutet dies, dass das Webpack keine anderen Videotypen wie .mov, .vob, .avi, etc. lädt?

Wenn Sie einen Blick auf den Code werfen möchten, here's the repository.

---

Ressourcen

• 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

Ich hatte das gleiche Problem, meine Lösung ist:

Es verwendet https://github.com/webpack/html-loader und https://github.com/webpack/url-loader:

Die Lader-Konfiguration:

loaders: [{ 
     test: /\.html$/, 
     loader: 'html-loader?attrs[]=video:src' 
    }, { 
     test: /\.mp4$/, 
     loader: 'url?limit=10000&mimetype=video/mp4' 
    }] 

Und in html:

Einem einfachen Video-Tag, remeber webpack verwendet einen Pfad, der auf die HTML-Datei verweist.

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

Das funktioniert für mich.

Referenzen: https://github.com/webpack/html-loader/issues/28