1.播放器选择
1.dplayer
2.liveplayer(此处选择这个)liveplayer
2.安装
npm install --save-dev video.js
npm install @liveqing/liveplayer
npm install flv.js
3.liveplayer在vue中使用
3.1 复制依赖文件
安装 copy-webpack-plugin 插件, npm install copy-webpack-plugin@4.6.0,
编辑你的 webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{ from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}
{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},
])
]
}
}
3.2 html模板中引入依赖js
<script src="js/liveplayer-lib.min.js"></script>
3.3 编辑你的 Vue 组件
......
import LivePlayer from '@liveqing/liveplayer'
......
components: {
LivePlayer
}
......
<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>