关于vue.js:vue中Liveplayer的使用

liveplayer和easyplayer应用办法很类似，属性也基本相同，上面开始liveplayer应用办法：
1.npm装置liveplayer、copy-webpack-plugin

npm install @liveqing/liveplayernpm install copy-webpack-plugin@4.0.1 --save-dev

也可在package.json文件中间接增加版本号，而后执行yarn install 或 npm install：

"dependencies": {  "@liveqing/liveplayer": "2.3.3",},"devDependencies": {  "copy-webpack-plugin": "^4.0.1",}

2.在vue.config.js文件中配置

const CopyWebpackPlugin = require('copy-webpack-plugin')...new CopyWebpackPlugin([  { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml' },  { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/' },  { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf' },  { from: 'node_modules/@liveqing/liveplayer/dist/element/liveplayer-element.min.js', to: 'js/' },])

3.在public/index.html中引入js动态资源
留神：文件地位要与下面配置的to...雷同，下面配置是的 to: 'js/'，所以底下地址是./js

<!--引入liveplayer依赖--><script src="./js/liveplayer-lib.min.js"></script><script src="./js/liveplayer-element.min.js"></script>或<script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script><script src="<%= BASE_URL %>js/liveplayer-element.min.js"></script>

4.在vue中应用

<live-player  :video-url="item.videoUrl"  :poster="item.poster"  :live="true"  :stretch="true"  :controls="item.carouselShow ? false : true"  :hide-big-play-button="true"  alt=""></live-player>...import LivePlayer from '@liveqing/liveplayer'...components: { LivePlayer }