Webpack 3找到.mp4文件,但视频无法播放

Question

Webpack 3定位.mp4文件但视频无法播放

在GitHub上克隆这个项目

我在Adobe新的Animate CC中创建了一个动画并将其导出为.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>

但不玩吗？

我试过的其他事情

• 在JavaScript中设置video标记的src属性
• 将视频文件放在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上克隆这个项目.

Answer 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]'
          }  
        }
      ]
    }