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

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

npm install @liveqing/liveplayer
npm 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}