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脚本运行时(
包.json
"build:dev": "webpack --watch",
浏览器是否找到.mp4文件
索引.html
<video loop autoplay controls>
<source id="arrows" src="c31...random_hash...1611.mp4" type="video/mp4">
</video>
但不玩吗？
我尝试过的其他事情
- 在 JavaScript 中设置
video标签的src属性 - 将视频文件放在索引旁边.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"
}
}
}
主.js
import mov from '../media/arrows.mp4';
function render_arrows() {
var vidtag;
vidtag = document.getElementById('arrows');
vidtag.src = mov;
}
render_arrows();
正如我之前提到的，你也可以在GitHub上克隆这个项目。
在 webpack.config 中指定输出文件名.js
-
查看 Wepback 文档：
file-loader -
以下是加载器的外观：
{ test: /.(mov|mp4)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]' } } ] }重要！
您还必须将视频导入
main.js文件中，如下所示：主.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 已经变得非常流行，这可能是最好的交付方法。从今天(5/11/19(开始，如果您尝试从 NodeJS 服务器从组件内的相对路径加载视频，同时向根目录以外的任何路径发出 GET 请求，它将无法找到您的文件。例如，如果您有一个位于https://example.com/videos/593020的视频，并且有人向该 URL 发出 GET 请求，则您的视频将不会加载，因为 NodeJS 不知道在哪里可以找到它。
我可能是错的。您可以通过将其导入到其他地方来加载它。我所知道的是，Node尝试使用路径从您指定的任何路径获取视频window.location.href.使用 CDN 要容易得多。
任何使用 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 的更多信息