Webpack 3找到.mp4文件，但视频无法播放 [英] Webpack 3 locates .mp4 file but video is not playable
问题描述
我已经在Adobe的新Animate CC中创建了一个动画，并将其导出为.mp4文件
I've created an animation in Adobe's new Animate CC and exported it as an .mp4 file
在我的webpack.config.js文件中，我说过file-loader应该用于加载我的.mp4文件，如下所示:
In my webpack.config.js file, I stated that the file-loader should be used to load my .mp4 file like so:
webpack.config.js
webpack.config.js
{
test: /\.(mov|mp4)$/,
use: [
'file-loader'
]
}
(您可以在下面找到我的webpack.config.js源代码)
(You can find my webpack.config.js source code below)
那为什么为什么当我运行webpack(或者在本地运行webpack作为npm脚本)
So why, when I run webpack (or rather locally, webpack as an npm script)
package.json
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)
- setting the
videotag'ssrcattribute in JavaScript - placing the video file next to the index.html in the same directory
- Using a different format (
.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上克隆此项目.
As I mentioned earlier, you could also clone this project on GitHub.
推荐答案
在webpack.config.js中指定输出文件名
这是您的装载机的外观:
Here is what your loader should look like:
{
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/目录.
您的路径应如下所示:
Now, in index.html (inside your src/ directory), you can set the src attribute of your video tag to a relative path that would point to your video when it loads into the dist/ directory.
Your path should look something like this:
<video loop autoplay controls>
<source src="./video_1.mp4" type="video/mp4">
</video>
现在运行npm run build或npm run build:dev
Now run npm run build or npm run build:dev
您可以可以选择指定如下路径:
You can optionally specify a path like so:
webpack.config.js
webpack.config.js
{
test: /\.(mov|mp4)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
]
}
更新
您还可以使用 CDN 交付视频.只需将video元素的src设置为URL.
You can also use a CDN to deliver your video. Simply set the src of your video element to a URL.
即.
src="https://cloudflare.com/?user=574983038&video=cat.mp4"
如果您不想为CDN付费，则始终可以使用远程服务器.我知道这也要花钱，但是有可能，您可能已经拥有了.只需确保已将CORS设置为可交付到您的网站即可:
If you don't want to pay for a CDN, you can always just use a remote server. I realize that also costs money, but chances are, you probably already have one. Just make sure you have CORS set to deliver to your website:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
由于NodeJS变得非常流行，所以无论如何这可能是最好的交付方法.截至今天(19年5月11日)，如果您尝试从NodeJS服务器中组件内部的相对路径加载视频，同时向根目录以外的任何路径发出GET请求，则它将无法找到您的文件.例如，如果您有一个位于https://example.com/videos/593020的视频，并且有人向该URL发出GET请求，则您的视频将不会加载，因为NodeJS不知道在哪里找到它.
Since NodeJS has become very popular, this is probably the best method of delivery anyways. As of today (5/11/19), if you try to load your video from a relative path inside your component from a NodeJS server whilst making a GET request to any path other the root directory, it won't be able to find your file. For example, if you have a video located at https://example.com/videos/593020, and someone makes a GET request to that URL, your video won't load because NodeJS won't know where to find it.
我可能是错的.您可能可以通过将其导入其他地方来加载它.我所知道的是，Node尝试使用window.location.href路径从指定的任何路径获取视频.使用CDN更容易 .
I could be wrong. You might be able to load it by importing it somewhere else. What I do know is that Node attempts to get your video from whatever path you specify using the path of window.location.href. Using a CDN is much easier.
这篇关于Webpack 3找到.mp4文件，但视频无法播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
