So laden Sie eine lokale video-in Reagieren mit webpack?

Ich kann nicht scheinen, um herauszufinden, wie man ein html5 video zu Rendern in eine reagieren-app lokale Dateien. Buchstäblich der einzige Weg, ich habe in der Lage, diese zu arbeiten ist wie folgt:

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

Hier ist, was ich versucht habe

1. Darunter den Pfad direkt

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

gibt einen Fehler

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

2. Das hinzufügen dieser Lader ein zu einer Zeit zu der webpack config

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

dieser spuckte die folgende Fehlermeldung im browser

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

3. Ich versucht, indem Sie eine direkte url zu der Datei

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

aber immer noch Fehler:

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

4. Ich habe versucht, das hinzufügen der mp4-Erweiterung in meinem webpack config wie diese person hat

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

aber kein Glück

5. Ich begann mit der Umsetzung webpack-isomorph-tools aber damals war ich nicht sicher, ob dies die richtige Richtung, so dass ich wartete auf es. Es scheint, dass dieser Kerl bekam es auf diese Weise zu arbeiten. (siehe Datei)

Habe ich auch bemerkt, in der webpack-Dokumentation unter loader-Konventionen, dass file-loader laden von video-Dateien.
So laden Sie eine lokale video-in Reagieren mit webpack?
Bedeutet das webpack nicht laden, andere video-Typen wie .mov, .vob, .avi, etc.?

Wenn Sie möchten, werfen Sie einen Blick auf den code, hier ist das repository.

Ressourcen

  • "Bedeutet das webpack nicht laden, andere video-Dateitypen wie .mov, .vob, .avi, etc.?" --- es heißt nicht, dass: webpack nicht kümmern, wie Sie mit Dateinamen, sobald test geht.
  • Ich denke, deine 'test' regex ist falsch. Versuchen /\.(png|jpg|jpeg|gif|svg|mp4)$/.
  • was ist Los mit ihm?
  • Sorry, es sah nur überflüssig und die letzten . war nicht entgangen, aber ich glaube nicht, es ist der Ursprung des Problems, D. H. nicht falsch. Was bekommen Sie in der src bei der Verwendung von Lösung 4?
  • Ich bin kein OP 🙂 in der Tat, die . müssen escaped werden, aber das könnte nur dazu führen, dass false-positive, das ist nicht ein problem im moment.
  • versuchen Sie, importieren Ihrer Datei auf der Oberseite der Komponente, anstatt Sie zu importieren innerhalb jsx. für ex: import videoUrl from '/path/to/file.mp4' und dann innerhalb von jsx setzen <video src={videoUrl} />.
  • ja die import - Anweisung nicht funktioniert hat. Es noch gab die gleiche Fehler wie Lösung 2.
  • Ich war in der Lage, um es arbeiten tun beide 1. und 2. zusammen. Der einzige Unterschied ist, dass ich ein var x = require('path/to/video'). Ich habe auch die name=videos/[name].[ext] könnte in Zusammenhang stehen. Auch stellen Sie sicher, dass Sie start-und Stopp-webpack, wenn Sie gerade Dateien.

InformationsquelleAutor Alex Cory | 2016-04-07
  1. 14

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

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

    Den loader-Konfiguration:

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

    Und im html-Format:

    Einem einfachen video-tag, denken Sie daran, webpack verwendet genannten Pfad zu der html-Datei.

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

    Dies funktioniert für mich.

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

    • Ich nehme an, es gibt Tippfehler. sollte loader: 'url-loader?limit.... Für mich funktioniert dieser Weg
    InformationsquelleAutor Heitor Estrela Gomes
Schreibe einen Kommentar