Спасибо тебе большое за это! Ты спас мой день! ;)
ck 3 находит
.mp4
файл, но видео не воспроизводитсяКлонировать этот проект на GitHub
Я создал анимацию в новом Animate CC от Adobe и экспортировал ее как.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
файл
<video loop autoplay controls>
<source id="arrows" src="c31...random_hash...1611.mp4" type="video/mp4">
</video>
но не играть в это?
Другие вещи, которые я пробовалустановкаvideo
тегаsrc
атрибут в JavaScriptразмещение видеофайла рядом с index.html в том же каталогеИспользование другого формата (.mov
)Вот мой исходный код:
webpack.config.jsconst 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.jsimport mov from '../media/arrows.mp4';
function render_arrows() {
var vidtag;
vidtag = document.getElementById('arrows');
vidtag.src = mov;
}
render_arrows();
Как я уже упоминал ранее, вы также можетеклонировать этот проект на GitHub.