基于 vue 项目使用

// 先下载
npm install xgplayer           //  mp4格式
npm install xgplayer-hls.js    // hls格式
npm install xgplayer-flv.js    // flv格式

在页面中引入 
// hls格式
import hlsjsPlayer from 'xgplayer-hls.js'
// mp4格式
import Player from 'xgplayer'
// flv 格式
import flvJsPlayer from 'xgplayer-flv.js'

 大家使用插件肯定是冲着 flv 和 hls 这两种视频流格式来的，普通mp4直接用vide标签不香吗

所以下面给主要给大家介绍一下 flv 和 hls 这两种格式的引用

// 首先需要在页面提供占位的 DOM 
// HTNL 部分

<div class='vido'> <div>


// JS部分

// 获取DOM
// 这里用的原生，大家随意，用框架的封装的例如vue的 ref 也都是没有问题的

data中声明  player : ''

let vido =document.querySelectorAll('.vido')

   this.player = new hlsjsPlayer ({

    //  hls和flv格式只需调用对应的hlsjsPlayer，和flvjsPlayer实例即可，配置用法一样的  

                  el: vido ,  // 绑定的实例 ，也就是我们获取的DOM
                  url: 'xxxxxxxxxxxxxxxxxxxxx', // 你需要访问的视频流地址
                  width: '100%',   // 宽高 都可以自定义 
                  // height: '',
                  // fitVideoSize: 'auto',
                  // fitVideoSize: 'fixWidth',
                  // fitVideoSize: 'auto',
                  autoplay: true, //是否自动播放
                  volume: 0.6, // 预设音量大小
                  ignores: ['time', 'definition', 'error', 'loading', 'play', 'poster', 'progress', 'replay']
                  // controls: false, //是否显示播放控件
                })

如此，你就获得了xgplayer的初体验，如果需要渲染多个，只需循环遍历一下

如图：获取使用all方法获取多个dom对象，此时得到的是一个数组，
xgplayer支持绑定el：“dom”方式，
如下就可以啦，你想渲染多少就渲染多少
 let vedoel = document.querySelectorAll('.videoimg')
          item.img.forEach((item, index) => {
            state.player = new hlsjsPlayer({
              el: vedoel[index],
              url: item.rtsp,
              width: '100%',
              autoplay: true, //是否自动播放
              volume: 0, // 预设音量大小
              // fullscreen: true,
              ignores: ['time', 'definition', 'error', 'loading', 'play', 'poster', 'progress', 'replay']
            })
          })

接下来说一下视频黑边的情况,

通过审查元素，xgplayer也是基于vido标签封装的

我们可以在页面中的css设置一下

使用样式穿透

/deep/ vido{

宽高100% 即可

}