Comment charger une vidéo locale de Réagir à l'aide de webpack?

Je n'arrive pas à comprendre comment obtenir une vidéo html5 pour les afficher dans une réagir application à partir de fichiers locaux. Littéralement la seule façon que j'ai pu obtenir que cela fonctionne, c'est comme cela:

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

Voici ce que j'ai essayé

1. Y compris le chemin d'accès directement

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

qui renvoie une erreur

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

2. L'ajout de ces chargeurs un à la fois pour le webpack config

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

ce cracher le message d'erreur suivant dans le navigateur

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

3. J'ai essayé d'ajouter un direct url pour le fichier

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

mais encore des erreurs:

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

4. J'ai essayé d'ajouter le mp4 extension dans mon webpack config comme cette personne n'a

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

mais pas de chance

5. J'ai commencé la mise en œuvre de webpack-isomorphe a ' -outils mais je n'étais pas sûr si c'était la bonne direction, j'ai donc mis en pause. Il semble que ce gars a eu il travailler de cette façon. (voir le fichier)

J'ai aussi remarqué dans le webpack de la documentation sous chargeur de conventions que file-loader va charger les fichiers vidéo.
Comment charger une vidéo locale de Réagir à l'aide de webpack?
Est-ce à dire webpack de ne pas charger d'autres types de vidéos comme des .mov, .vob, .avi, etc.?

Si vous voulez prendre un coup d'oeil au code, voici le référentiel.

Ressources

"Est-ce à dire webpack de ne pas charger d'autres types de vidéos comme .mov, .vob, .avi, etc?" - - - - - cela ne signifie pas que: webpack ne se soucie pas comment vous faites correspondre les noms de fichiers dès que test passe.
Je pense que votre "test" regex est faux. Essayez /\.(png|jpg|jpeg|gif|svg|mp4)$/.
quel est le problème avec elle?
Désolé, c'était tout simplement redondants et la dernière . a pas échappé, mais je ne pense pas que c'est l'origine du problème, c'est à dire pas de mal. Qu'obtenez-vous dans la src lors de l'utilisation de la solution 4?
Je ne suis pas un OP 🙂 en Effet, la . doit être échappé, mais qui ne pouvait conduire à des faux positifs, ce n'est pas un problème pour le moment.

OriginalL'auteur Alex Cory | 2016-04-07

  1. 12

    J'ai eu le même problème, ma solution est la suivante:

    Il utilise https://github.com/webpack/html-loader et https://github.com/webpack/url-loader:

    Les chargeurs de configuration:

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

    Et en html:

    Une simple balise vidéo, n'oubliez pas webpack utilise le chemin d'accès référencés dans le fichier html.

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

    Cela fonctionne pour moi.

    Références:
    https://github.com/webpack/html-loader/issues/28

    Je suppose qu'il y est de la faute de frappe. devrait être loader: 'url-loader?limit.... Fonctionne pour moi de cette façon

    OriginalL'auteur Heitor Estrela Gomes