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

Posted 2023-02-16

【中文标题】Webpack 3 找到 .mp4 文件，但视频无法播放

【英文标题】：Webpack 3 locates .mp4 file but video is not playable

【发布时间】：2018-01-20 14:09:10

【问题描述】：

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

Clone this project on GitHub

我在 Adob​​e 的新 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();

正如我之前提到的，你也可以clone this project on GitHub.

【参考方案1】：

在 webpack.config.js 中指定输出文件名

查看Wepback Documentation: file-loader

你的加载器应该是这样的：

  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';

现在，在 index.html 中（在您的 src/ 目录内），您可以将您的 video 标记的 src 属性设置为一个相对路径，当视频加载到 dist/ 时该路径将指向您的视频目录。您的路径应如下所示：

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

现在运行npm run build或npm run build:dev

您可以选择指定路径，如下所示：

webpack.config.js

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

---

更新

您还可以使用 CDN 来传送您的视频。只需将video 元素的src 设置为URL。

即。

src="https://cloudflare.com/?user=574983038&video=cat.mp4"

如果您不想为 CDN 付费，您可以随时使用远程服务器。我知道这也需要花钱，但很有可能，你可能已经有了。只需确保您已将 CORS 设置为传送到您的网站：

使用 php 的示例

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");

由于 NodeJS 变得非常流行，无论如何这可能是最好的交付方法。截至今天（2019 年 5 月 11 日），如果您尝试从 NodeJS 服务器的组件内的相对路径加载视频，同时向根目录以外的任何路径发出 GET 请求，它将无法找到你的文件。例如，如果您有一个位于 https://example.com/videos/593020 的视频，并且有人向该 URL 发出 GET 请求，您的视频将不会加载，因为 NodeJS 不知道在哪里可以找到它。

我可能是错的。您可以通过将其导入其他地方来加载它。我所知道的是，Node 尝试使用window.location.href 的路径从您指定的任何路径获取您的视频。使用 CDN 要容易得多。

【讨论】：

非常感谢您！你救了我的一天！ ;)

谢谢！不知道main.js文件中需要导入的路径。

【参考方案2】：

任何使用像 OP 这样的 html-loader 的人，您都可以将其配置为自动导入视频，如下所示：

        

            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上查看更多信息