Webpack 3 找到 .mp4 文件但视频无法播放
Webpack 3 locates .mp4 file but video is not playable
Webpack 3 找到 .mp4
文件但无法播放视频
我在 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();
正如我之前提到的,您也可以 clone this project on GitHub.
在webpack.config.js
中指定输出文件名
加载程序应该如下所示:
{
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]'
}
}
]
}
Update
您还可以使用 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 容易得多。
任何像 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
的更多信息
Webpack 3 找到 .mp4
文件但无法播放视频
我在 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 中设置
- 将视频文件放在同一目录中 index.html 旁边
- 使用不同的格式(
.mov
)
video
标签的 src
属性
这是我的源代码:
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.
在webpack.config.js
中指定输出文件名加载程序应该如下所示:
{ 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]'
}
}
]
}
Update
您还可以使用 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 容易得多。
任何像 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
的更多信息