liveGBS的使用

网址1：Vue项目集成LivePlayer播放器_dhz654321的博客-CSDN博客

网址2：LivePlayer播放器安装与使用

过程：

1、在自己的前段项目里面执行：npm install @liveqing/liveplayer

2、vue.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、index.html页面添加配置：

<script  type="text/javascript" src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>

 

4、页面中使用：

<template>
    <div class="videoPlayer">
            <LivePlayer      :videoUrl="url"    />
   </div>
</template>
<script>
import LivePlayer from  '@liveqing/liveplayer'
export default { 
    name: 'VideoPlayer', 
    data() {  
        return {    
            url: 'http://127.0.0.1:8090/video/x.mp4'  
        } 
    }, 
    components: {  
        LivePlayer
}
}
</script>

 

备注：

1、如果页面报错：‘Uncaught ReferenceError: videojs is not defined’，可能原因是index.html页面未引入liveplayer-lib.min.js文件导致的；

2、如果执行npm的时候报什么什么文件夹不能操作是因为网络问题，执行 npm cache clean --force 来清除缓存，然后重新npm；