功能：ant Design vue使用腾讯播放器实现监控视频直播、点播，多个视频同时播放
效果图：
自适应布局
第一步安装npm包
npm install tcplayer@0.0.24 --save第二步封装子组件
<template >
<div :id="`video_container_${index}`" class="video_container"></div>
</template>
<script>
import { TcPlayer } from 'tcplayer'
export default {
name: 'Cviewplayer',
props: {
//默认监控图片
Defaultimage: { type: String, default: '' },
//视频的url
videoUrl: { type: String, default: '' },
//视频的坐标，用于判断div的id赋值到对应的容器
index: { type: Number, default: 0 },
//是否播放
isPlay: { type: Boolean, default: false },
},
data() {
return {
player: [],
poster: '' /* 视频封面 */,
}
},
created() {
this.$nextTick(() => {
this.initPlayer()
})
},
watch: {
isPlay() {
this.$nextTick(() => {
if (this.isPlay) {
this.play()
this.$emit('PlayClose', false)
}
})
},
},
methods: {
initPlayer() {
if (this.player.length) {
this.player.forEach((item) => {
item.destroy()
})
this.player = []
}
var options = {
//视频地址
m3u8: this.videoUrl,
flv: this.videoUrl,
//是否自动播放
autoplay: false,
preload: true,
//暂停时视频封面
poster: { style: 'cover', src: this.Defaultimage },
coverpic: this.Defaultimage,
// live: live,
width: '100%',
height: '100%',
x5_player: true,
x5_type: 'h5-page',
x5_fullscreen: true,
wording: {
1: '网络错误，请检查网络配置或者播放连接是否正确',
1002: '即将开始，请稍等',
2032: '请求视频失败，请检查网络',
2048: '请求m3u8文件失败，多是网络错误或者跨域问题',
},
flash: false, //是否优先使用 flash 播放视频
pausePosterEnabled: true /* 暂停时显示封面 默认为true */,
listener: (msg) => {
if (msg.type == 'load') {
//加载完事件
// this.player.play()
}
if (msg.type == 'ended') {
//播放完成事件
// this.player[this.index].close()
}
// 播放失败，重新连接
if (msg.type == 'error') {
setTimeout(() => {
if (this.player[this.index]?.options.src == undefined) return false
this.player[this.index]?.load() // 重连
}, 4000)
}
},
}
// 初始化
this.player.push(new TcPlayer('video_container_' + this.index, options))
},
// 播放或暂停
play() {
if (this.player.length) {
this.player.forEach((item) => {
//如果没有地址则跳过
if (item.options.src == undefined) return false
item?.play()
})
} else {
this.$message.warning('暂无视频播放源，请检查设置')
}
},
},
}
</script>
<style lang="less" scoped>
.video_container {
width: 100%;
height: 100%;
}
// 修改视频提示语位置
/deep/ .vcp-error-tips {
padding-top: 66px;
}
</style>第三步父组件调用
<template>
<div class="b-wrapper">
<!-- 按钮组 -->
<div class="buttonList">
<a-button type="primary" @click="VideoPlay">播放</a-button>
<a-button @click="proportionSumbit(1)">1:1</a-button>
<a-button @click="proportionSumbit(2)">2:2</a-button>
<a-button @click="proportionSumbit(3)">3:3</a-button>
<a-button @click="proportionSumbit(4)">4:4</a-button>
</div>
<!-- 视频组 -->
<div class="VideoGirus" :style="`grid-template-columns:${autoNumber} `">
<div v-for="(item, index) in Proportion" :key="index">
<div class="colvideo">
<div
class="titlevideo"
:style="`color:${com.config.textColor};font-weight: ${
com.config.textWeight == true ? '600' : 'normal'
};font-size: ${com.config.textSize};`"
v-show="com.config.isShow"
>
{{ item.title }}
</div>
<cviewplayer
class="cviewplayer"
:key="freshDom"
:videoUrl="item.videoUrl"
:index="item.index"
:isPlay="isPlay"
@PlayClose="PlayClose"
></cviewplayer>
</div>
</div>
</div>
</div>
</template>
<script>
//这个是引用子组件
import cviewplayer from './cview-player'
export default {
name: 'BVideoMonitor',
components: { cviewplayer },
data() {
return {
//赋值时间戳达到刷新的效果
freshDom: '',
//数据的数组
Proportion: [],
//判断比例
autoNumber: 'auto auto auto auto',
//是否播放
isPlay: false,
//存储数据的变量
com:{
//配置
config:{
//标题颜色
textColor:'',
//字体大小
textSize:'',
//默认展示比例: 1(1:1) 2(2:2) 3(3:3) 4(4:4)
defaultProportion: 2,
//是否显示标题栏
isShow:true,
//字体大小
textSize: 'small', //medium / small / mini
//字体加粗
textWeight: false,
//用于播放首个视频用
showVideo: {},
//是否数据新增，修改，删除
isDataUpdate: false
},
//数据
apiData:{
data:[
{
//视频唯一id
id:'0',
//视频状态 根据业务自定义是否需要此字段
status:0,
//视频标题名称
title:'视频地址标题名称',
//视频地址
videoUrl:'https://new.qqaku.com/20220508/s44ly5RX/1100kb/hls/index.m3u8'
}
]
}
},
}
},
created() {
this.fun_into()
},
watch: {
//监听是否更改了视频数据源
'com.config.isDataUpdate': {
handler: function () {
if (this.com.config.isDataUpdate) {
this.proportionSumbit(this.com.config.defaultProportion)
this.com.config.isDataUpdate = false
}
},
},
},
methods: {
//接收子级传来的是否播放状态
PlayClose() {
this.isPlay = false
},
//初始化
fun_into() {
this.proportionSumbit(this.com.config.defaultProportion)
},
//播放事件
VideoPlay() {
this.isPlay = true
},
//视频比例
proportionSumbit(val) {
//grid赋值比例的
this.proportion(val)
this.Proportion = []
this.freshDom = +new Date()
for (var i = 0; i < val * val; i++) {
this.Proportion.push({
id: this.com.apiData.data[i]?.id,
status: this.com.apiData.data[i]?.status,
title: this.com.apiData.data[i]?.title,
videoUrl: this.com.apiData.data[i]?.videoUrl,
index: i,
})
}
},
//grid赋值比例的
proportion(val) {
switch (val) {
case 1:
this.autoNumber = 'auto'
break
case 2:
this.autoNumber = 'auto auto'
break
case 3:
this.autoNumber = 'auto auto auto'
break
case 4:
this.autoNumber = 'auto auto auto auto'
break
default:
this.autoNumber = 'auto auto auto auto'
break
}
},
},
}
</script>
<style lang="less" scoped>
.b-wrapper {
height: 100%;
width: 100%;
> .buttonList {
width: 100%;
margin-top: -10px;
padding-bottom: 10px;
display: flex;
justify-content: flex-start;
flex-direction: row;
> button:first-child {
margin: 0;
width: 80px;
height: 35px;
}
> button {
margin-left: 10px;
width: 80px;
height: 35px;
}
}
> .VideoGirus {
width: 100%;
height: 97%;
// border: 1px dashed #000;
display: grid;
grid-column-gap: 5px;
> div {
width: 100%;
height: 100%;
display: inline-table;
> .colvideo {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: relative;
> .titlevideo {
// position: initial;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
position: absolute;
z-index: 1;
height: 35px;
width: 100%;
background-color: #000;
opacity: 0.7;
font-size: 16px;
padding: 4px 0 0 15px;
}
> .cviewplayer {
position: absolute;
width: 100%;
height: 98%;
}
}
}
}
}
</style>踩坑点
1.该功能中需要同时播放多个视频，因此需要给div赋值唯一的id :id=“video_container_${index}”
2.因为是自适应布局所有需要给父组件最外层div赋值固定的高宽度
3.刷新视频数据源同时需要给子组件加key进行强制刷新 :key=“freshDom” this.freshDom = +new Date()
4.官网地址：播放器API文档 5.如果无法播放flv的视频，则可能是无法请求到http://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/libs/flv.min.1.5.js文件的接口，这种一般是测试电脑局域网防火墙的问题
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
