基于 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% 即可
}