Webpack 3 находит файл.mp4, но видео не воспроизводится

Webpack 3 находит .mp4 файл, но видео не воспроизводится

Клонировать этот проект на GitHub

Я создал анимацию в новом Animate CC от Adobe и экспортировал ее как .mp4 файл

В моем файле webpack.config.js я заявил, что file-loader должен быть использован для загрузки моего .mp4 файл вроде так:

webpack.config.js

  {
    test: /\.(mov|mp4)$/,
    use: [
      'file-loader'
    ]
  }

(Вы можете найти мой webpack.config.js Исходный код ниже)

Так почему, когда я бегу webpack (точнее локально, webpack как npm скрипт)

package.json

"build:dev": "webpack --watch",

браузер находит .mp4 файл

index.html

<video loop autoplay controls>
  <source id="arrows" src="c31...random_hash...1611.mp4" type="video/mp4">
</video>

но не играть в это?

Другие вещи, которые я пробовал

  • установка video тега src атрибут в JavaScript
  • размещение видеофайла рядом с index.html в том же каталоге
  • Использование другого формата (.mov)

Вот мой исходный код:

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'inline-source-maps',
  devServer: {
    contentBase: './dist',
    port: 3033
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          'html-loader'
        ]
      },
      {
        test: /\.scss$|\.css$/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader", "sass-loader"]
        })
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(mov|mp4)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(mov|mp4)$/,
        use: [
            'url-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/html/index.html',
      favicon: 'src/images/icon.png'
    }),
    new ExtractTextPlugin('styles.css'),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
  ],
  resolve: {
        alias: {
            jQuery: "src/js/jquery",
            $: "src/js/jquery"
        }
    }
}

main.js

import mov from '../media/arrows.mp4';

function render_arrows() {
  var vidtag;
  vidtag = document.getElementById('arrows');
  vidtag.src = mov;
}

render_arrows();

Как я упоминал ранее, вы также можете клонировать этот проект на GitHub.

Источник

1 ответ

Решение

Укажите имя выходного файла в webpack.config.js

  1. Посмотреть документацию Wepback:file-loader

  2. Вот как должен выглядеть ваш загрузчик:

    {
  test: /\.(mov|mp4)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]'
      }  
    }
  ]
}

    Важный!

    Вы также должны импортировать видео в свой main.js файл вроде так:

    main.js

    import video_2 from '../media/video_1.mp4';
    import video_1 from '../media/video_2.mov';

  3. Теперь в index.html (внутри вашего src/ каталог), вы можете установить src атрибут вашего video пометить относительный путь, который будет указывать на ваше видео, когда оно загружается в dist/ каталог.
    Ваш путь должен выглядеть примерно так:

        <video loop autoplay controls>
      <source src="./video_1.mp4" type="video/mp4">
    </video>

  4. Теперь беги npm run build или же npm run build:dev

При желании вы можете указать путь так:

webpack.config.js

    {
      test: /\.(mov|mp4)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]'
          }  
        }
      ]
    }
Источник

Любой, кто использует html-загрузчик, например OP, может настроить его для автоматического импорта видео следующим образом:

        {

            test: /\.(html)$/,
            use: {
                loader: "html-loader",
                options: {
                    attributes: {
                        list: [
                            {
                                tag: 'img',
                                attribute: 'src',
                                type: 'src',
                            },
                            {
                                tag: 'img',
                                attribute: 'srcset',
                                type: 'srcset',
                            },
                            {
                                tag: 'img',
                                attribute: 'data-src',
                                type: 'src',
                            },
                            {
                                tag: 'img',
                                attribute: 'data-srcset',
                                type: 'srcset',
                            },
                            {
                                tag: 'video',
                                attribute: 'src',
                                type: 'src',
                            },
                            {
                                tag: 'source',
                                attribute: 'src',
                                type: 'src',
                            },
                            {
                                tag: 'source',
                                attribute: 'srcset',
                                type: 'srcset',
                            }
                        ]
                    }
                }
            }
        }

Подробнее о html-loader

Источник
Другие вопросы по тегам