SkeyeWebPlayer.js H5播放器开发之播放器动态渲染video。 动态渲染是采用js进行创建dom、添加dom、添加class、style等方式操作dom元素。最终将播放器编译成成一个独立的文件，在页面中引入js文件使用，本项目采用webstorm编辑器、webpack编译工具来开发以及发布。
1.首先创建一个webpack项目。
- 新建一个文件夹，如：webPalyer 。
- 再 cmd 到该目录下 执行：npm init （首先要用node环境,以及npm） 一直回车，输入相关信息。
- 完了之后，会发现此时文件夹多了一个 package.json文件 【完整配置在最下方】 。
- 执行 npm install （如果网速过慢安装淘宝镜像后执行cnpm install也可以），执行完之后项目会多出来一个node_module文件夹。
- 创建 src 文件夹 里面放置我们的主要文件。
- 创建 webpack.config.js 文件 【完整配置在最下方】。
2.在package.json文件中的script中添加
"dev": "webpack --mode development --progress",
"build": "webpack --mode production --progress"
3.执行 npm run dev，执行后会在dist目录下生成SkeyeWebPlayer.js文件，就说明准备工作已经做好了。
npm run dev
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script src="../dist/SkeyeWebPlayer.js"></script>
<script>
new SkeyeWebPlayer()
</script>
</html>
4.扩展
（1）配置本地服务器（官网地址 https://www.npmjs.com/package/webpack-dev-server）。
（2）添加处理css/scss文件类型 （安装指定版本，高版本会报错）。
npm i -D sass-loader@7.0.1 node-sass@4.14.1
5.package.json相关的依赖包
{
"name": "webplayer",
"version": "2.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --progress",
"build": "webpack --mode production --progress"
},
"keywords": [
"html5",
"flv",
"mse",
"javascript"
],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"@babel/runtime": "^7.8.4",
"@videojs/generator-helpers": "~1.2.0",
"@videojs/vhs-utils": "^1.1.0",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"css-loader": "^3.6.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^5.1.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.14.1",
"sass-loader": "^7.0.1",
"style-loader": "^1.3.0",
"url-loader": "^3.0.0",
"wasm-worker": "^0.4.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webworkify-webpack": "^2.1.5"
},
"dependencies": {
"browser-sync": "^2.26.10",
"browserify": "^16.5.1",
"browserify-derequire": "^1.0.1",
"browserify-versionify": "^1.0.6",
"core-js": "^3.6.5",
"env": "0.0.2",
"es6-promise": "^4.2.8",
"eslint": "^7.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-typescript": "^0.14.0",
"istanbul-instrumenter-loader": "^3.0.1",
"jsencrypt": "^3.0.0-rc.1",
"node-polyfill-webpack-plugin": "^1.1.4",
"regenerator": "^0.13.1",
"state-machine": "^1.0.4",
"svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.1",
"typescript": "^3.8.3",
"typescript-eslint-parser": "^22.0.0",
"wasm-loader": "^1.3.0",
"webassemblyjs": "^1.9.0",
"webpack-merge": "^4.2.2",
"webworkify": "^1.5.0"
}
}
6.webpack.config.js文件的相关配置
const webpack = require('webpack');
const pkg = require('./package.json');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
let config = {
entry: {
SkeyeWebPlayer: './src/index.js'
},
resolve: {
extensions: ['.ts', '.js']
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, './dist'),
library: 'SkeyeWebPlayer',
libraryTarget: 'umd',
libraryExport: 'default',
globalObject: 'this'
},
plugins: [
// new NodePolyfillPlugin(),
new webpack.DefinePlugin({
__VERSION__: JSON.stringify(pkg.version)
})
],
optimization: {
splitChunks: false
// minimizer: [
// new TerserPlugin({
// extractComments: false,
// })
// ]
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: 'babel-loader',
options: {
babelrc: false,
'presets': [
['@babel/preset-env', {
loose: true,
modules: false,
targets: {
browsers: [
'chrome >= 47',
'firefox >= 51',
'ie >= 11',
'safari >= 8',
'ios >= 8',
'android >= 4'
]
}
}]
]
}
}
},
{
test: /\.js/, //babel转化es6到es5
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['@babel/plugin-transform-runtime']
}
}
},
{
test: /\.(css|scss)$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "sass-loader" // compiles Less to CSS
}
],
exclude: /node_modules/
},
{
test: /\.(woff2?|svg|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
// exclude: [path.resolve(__dirname, 'src/control-bar/icon')], // 排除该目录 其他规则中有svg 需要加入排除
options: {
limit: 10000000,
name: '[name].[hash:8].[ext]'
}
},
{
test: /\.wasm$/,
include: path.resolve(__dirname, 'wasm'),
use: [
{
loader: 'wasm-loader'
}
]
}
]
},
node: {
fs: 'empty'
}
};
module.exports = (env, argv) => {
if (argv.mode === 'production') {
config.output.filename = '[name].min.js';
}
return config;
};
]
}
]
},
node: {
fs: 'empty'
}
};
module.exports = (env, argv) => {
if (argv.mode === 'production') {
config.output.filename = '[name].min.js';
}
return config;
};
