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到es5exclude: /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;};
微信便捷交流