引用文件
首先先把showVideo的文件夹放到根目录下
在页面中引用相关文件
<link rel="stylesheet" href="showVideo/showVideo.min.css">
<script src="showVideo/showVideo-base.min.js"></script>
<script src="showVideo/showVideo.min.js"></script>
初始化播放器的相关配置
showVideo.setVideoOption({})
本播放器集成了公司业务的接口,包含了实播,回放,云台控制和回放速度控制,截图和全屏功能
可以根据type直接初始化接口地址
如果是第三方业务对接,也可以单独配置接口地址
url 是接口前缀,配置统一地址
showVideo.setVideoOption({
type: 2,
// show++接口为 1
// 畅联/中台接口为 2
// 网关接口为 3
// 门户接口为 4
url: 'http://qulink.24hlink.cn',
token: ''
// sPlayUrl: 'api/getPlayMsg', // 播放地址
// sPlayBackUrl: '', // 回放地址
// sControllerUrl: '', // 云台控制地址
// sMonthFileListUrl: '', // 录像按月
// sDayFileListUrl: '', // 录像按天
// tokenName: 'accessToken' // token在接口的属性名
})
初始化播放器
new showVideo.createVideo({})
开始播放
oVideo.setVideoData({},{})
可以传两个对象,第一个传的是播放用到的参数,第二个穿的是接口调用后返回的数据
其中第一个对象传的是设备的参数,根据业务接口传
streamKind:默认码流1(1.子码流,0主码流)
fileLocation:默认回放文件地址(2.集中录像, 3.设备录像)
oVideo.setVideoData({
deviceId: '',
channelIndex: '',
// cameraNum: '',
// channelId: '',
// channelNum: '',
// deviceChannelId: '',
// cameraId: '',
streamKind: 1, // 默认播放码流
fileLocation: 3 // 回放文件地址
}, {
// fPlayFun: function (err) {console.log(err)}, // 播放接口返回的数据
// fPlayController: function (err) {console.log(err)}, // 云台控制接口返回的数据
// fReplayControl: function (err) {console.log(err)}, // 回放倍速接口返回的数据
})
销毁播放器
oVideo.dispose()
提供直接播放地址
oVideo.playVideoUrl(url);
播放器分屏
<template>
<div ref="videoBox" class="video-box hasChange">
<ul class="video-box-ul">
<li
v-for="item in videoList"
:key="item.index"
:class="{'hover': nVideoIndex === item.index}"
:style="{height: divBox, width: divBox}"
@click="fClickVideo($event, item)"
>
<play-video
ref="PlayVideo"
:div-id="divId + item.divId"
:play-back="item.playBack"
:control="item.control"
/>
</li>
</ul>
<div class="video-box-btn">
<template v-if="!noChange">
<el-button v-for="item in aBtnList" :key="item.key" class="not-min" :class="{'hover': item.key === nVideoNum}" :disabled="bAutoPlay" @click="fChangeNum(item.key)"><svg-icon :icon-class="`btn${item.key}`" /></el-button>
<el-button class="not-min" :disabled="bAutoPlay" @click="fDisposeAll"><svg-icon icon-class="closeAll" /></el-button>
</template>
<el-button v-if="bShow" class="not-min"><screenfull :elem="$refs.videoBox" /></el-button>
</div>
</div>
</template>
<script>
import Screenfull from '@/components/Screenfull'
export default {
name: 'VideoBox',
components: {
Screenfull
},
props: {
noChange: {
type: Boolean,
default: false
},
divId: { // 播放器id
type: String,
default: 'now'
},
bAutoPlay: {
type: Boolean
}
},
data() {
const aBtnList = []
for (let i = 0; i < 6; i++) {
const key = i + 1
aBtnList.push({
key,
name: key
})
}
return {
aBtnList,
aVideoData: [],
nVideoNum: 0,
nVideoIndex: 0,
nGroupIndex: 0,
nDeviceIndex: 0,
bShow: false,
oAutoPlayTimer: null,
autoPlay: false
}
},
computed: {
// ...mapGetters([
// 'socketData'
// ]),
videoList() {
return this.aVideoData.slice(0, this.nVideoNum * this.nVideoNum)
},
divBox() {
return parseFloat(100 / this.nVideoNum) + '%'
// return `calc(${parseFloat(100 / this.nVideoNum)}%)`
},
videoHeight() {
return parseFloat(825 / this.nVideoNum)
}
},
watch: {
autoPlay(val) {
this.$emit('update:bAutoPlay', val)
}
},
created() {
this.fChangeNum(2)
},
mounted() {
this.bShow = true
},
beforeDestroy() {
this.fCloseAutoPlayVideo()
},
methods: {
fPlayVideo(camera) {
// console.log(this.videoList)
// console.log()
this.aVideoData[this.nVideoIndex].control = camera.hasPtz === 1
this.aVideoData[this.nVideoIndex].oCamera = camera
this.$refs.PlayVideo[this.nVideoIndex].fPlayVideo({
...camera
})
if (this.nVideoIndex + 1 < (this.nVideoNum * this.nVideoNum)) {
this.nVideoIndex++
}
},
fPlayVideoAll(arr) {
const length = arr.length
const num = this.fPlayVideoAllMaxNum(length)
const max = length > (num * num) ? (num * num) : length
const NewArr = arr.slice(0, max)
this.fChangeNum(num)
this.nVideoIndex = 0
this.$nextTick(() => {
NewArr.forEach(camera => {
this.fPlayVideo(camera)
})
})
},
fPlayVideoAllMaxNum(length) {
let max = 1
for (let i = 0; i < this.aBtnList.length; i++) {
const num = this.aBtnList[i].key
max = num
if (length <= num * num) {
break
}
}
return max
},
fChangeNum(num) { // 切换画面数
if (this.nVideoNum === num) {
return
}
// const oldNum = this.nVideoNum
this.nVideoNum = num
for (let i = this.aVideoData.length; i < (num * num); i++) {
this.aVideoData.push({
index: i,
control: false,
playBack: false,
divId: 'playerVideo' + i
})
}
// for (let i = num * num; i < oldNum * oldNum; i++) {
// this.aPlayData[i] = null
// }
},
fClickVideo(event, item) {
this.nVideoIndex = item.index
this.$emit('fClickVideo', item.oCamera || {})
},
fDisposeAll() { // 关闭所有画面
for (let i = 0; i < this.videoList.length; i++) {
this.$refs.PlayVideo[i].dispose()
// this.aPlayData[i] = null
}
this.nVideoIndex = 0
}
}
}
</script>
秀++视频开放平台(www.showplusplus.cn)专注于音视频信号的接入、管理及AI集成,由杭州美畅物联技术有限公司精心打造,通过提供云、中台、边、旁路、端等一系列产品,为客户提供视频能力底座支撑以及全栈式解决方案。