vue+videojs九宫格切换播放（含源码）
2022-08-08 本文已影响0人
东冥羽
vuecli中引入videojs进行m3u8视频播放以及分栏切换，内容涉及视频播放、宫格切换、选中窗口视频替换功能。
依赖：videojs、flv.js、videojs-contrib-hls、videojs-flvjs-es6、vue-video-player
页面效果
1.jpg
2.jpg
说明：只针对本人项目中用到的功能，代码较多
1. 示例代码运行时，请先把左边列表里面的视频地址改成自己的，代码视频链接目前为空
- 视频选择时判断是否有链接，无链接时走提示
- 根据分栏数目以及选中窗口判断视频是添加、直接替换、二次替换(涉及到窗口切换时使用)
- 监听视频播放状态，自定义播放出错占位；视频上遮盖蒙层进行自定义内容显示和点击事件
部分代码
列表视频点击选择的视频赋值播放
// 判断分栏情况
// 只有一栏 ==== 没有数据进行添加，有数据进行编辑替换
if (this.layoutNum == 1) {
if (!this.playCodeList.length) {
this.$refs.hlsVideoPlayer.handelVideoUrl(vcode, vurl, vname, 0)
// 把当前的链接放进去
this.playCodeList.push(vcode)
this.playUrlList.push(vurl)
this.playNameList.push(vname)
} else {
// 如果已经有正在播放的视频，进行视频的替换
this.playCodeList = [vcode]
this.playUrlList = [vurl]
this.playNameList = [vname]
this.$refs.hlsVideoPlayer.editUrl(vcode, vurl, vname, 0)
}
} else {
// 多栏情况
// 还有播放窗口：当选选中窗口数大于已选中播放的列表
if (this.layoutNum > this.playCodeList.length) {
// 选中切换的是正在播放的，直接编辑替换
if (this.chooseIndex < this.playCodeList.length) {
this.$refs.hlsVideoPlayer.editIsPlay(this.chooseIndex, true)
this.$set(this.playCodeList, this.chooseIndex, vcode)
this.$set(this.playUrlList, this.chooseIndex, vurl)
this.$set(this.playNameList, this.chooseIndex, vname)
this.$refs.hlsVideoPlayer.resetEdit(vcode, vurl, vname, this.chooseIndex)
} else {
// 判断是否是已经添加过的
// 没有添加过，直接添加
if (this.chooseIndex > this.chooseMaxIndex) {
this.playCodeList.push(vcode)
this.playUrlList.push(vurl)
this.playNameList.push(vname)
this.$refs.hlsVideoPlayer.handelVideoUrl(vcode, vurl, vname)
} else {
this.$refs.hlsVideoPlayer.editIsPlay(this.chooseIndex, true)
this.$set(this.playCodeList, this.chooseIndex, vcode)
this.$set(this.playUrlList, this.chooseIndex, vurl)
this.$set(this.playNameList, this.chooseIndex, vname)
this.$refs.hlsVideoPlayer.resetEdit(vcode, vurl, vname, this.chooseIndex)
}
}
} else {
// 添加到最后一个的时候，判断是否是从少窗口切换来的
this.$refs.hlsVideoPlayer.editIsPlay(this.chooseIndex, true)
this.$set(this.playCodeList, this.chooseIndex, vcode)
this.$set(this.playUrlList, this.chooseIndex, vurl)
this.$set(this.playNameList, this.chooseIndex, vname)
this.$refs.hlsVideoPlayer.resetEdit(vcode, vurl, vname, this.chooseIndex)
}
this.$refs.hlsVideoPlayer.thisCodeLength = this.playCodeList.length
}
分栏窗口切换
问题
如果选中切换的窗口屏幕小于当前展示的屏幕数，直接替换已经存在的，把多余的隐藏播放
说明：为什么是隐藏而不是直接销毁删除
答：直接删除会造成再次赋值视频无法播放的问题
// 分栏管理选中改变
changeLayout({ name, nums }) {
// 当前分栏重复选择
if (this.layoutName == name) return
// 没有选中视频的时候，不允许切换分栏
if (!this.playCodeList.length) return
// 赋值上一个分栏窗口数，用作对比
this.oldLayoutNum = this.layoutNum
// 赋值页面的窗口数
this.$refs.hlsVideoPlayer.layoutNum = nums
let hadCodeList = []
let hadUrlList = []
let hadNameList = []
// TODO 暂时没必要进行，无链接的视频添加时已进行了判断处理，此步骤无用
this.playCodeList.forEach((item, index) => {
// 剔除为空的情况，进行数据重新添加
if (item != '') {
hadCodeList.push(item)
hadUrlList.push(this.playUrlList[index])
hadNameList.push(this.playNameList[index])
}
})
// 如果选中切换的窗口屏幕小于当前展示的屏幕数，直接替换已经存在的，把多余的隐藏播放
// 说明：为什么是隐藏而不是直接销毁删除
// 答：直接删除会造成再次赋值视频无法播放的问题
if (nums < this.layoutNum) {
// 截取当前展示的前几个
hadCodeList = hadCodeList.slice(0, nums)
hadUrlList = hadUrlList.slice(0, nums)
hadNameList = hadNameList.slice(0, nums)
// 赋值当前
this.playCodeList = [...hadCodeList]
this.playUrlList = [...hadUrlList]
this.playNameList = [...hadNameList]
this.$refs.hlsVideoPlayer.thisCodeLength = hadCodeList.length
setTimeout(() => {
let chooseMaxIndex = this.chooseMaxIndex
chooseMaxIndex = chooseMaxIndex + 1
if (chooseMaxIndex == 3 || chooseMaxIndex == 5 || chooseMaxIndex == 7) {
chooseMaxIndex = chooseMaxIndex + 1
} else {
chooseMaxIndex = chooseMaxIndex
}
for (let i = 0; i < chooseMaxIndex; i++) {
if (hadCodeList[i] && hadCodeList[i] != '') {
// 修改赋值
this.$refs.hlsVideoPlayer.editIsPlay(i, true)
} else {
this.$refs.hlsVideoPlayer.editIsPlay(i, false)
}
}
}, 400)
} else {
this.playCodeList = hadCodeList
this.playUrlList = hadUrlList
this.playNameList = hadNameList
this.$refs.hlsVideoPlayer.thisCodeLength = hadCodeList.length
for (let i = 0; i < hadCodeList.length; i++) {
this.$refs.hlsVideoPlayer.editIsPlay(i, true)
}
}
if (nums == this.playCodeList.length) {
this.$refs.hlsVideoPlayer.chooseIndex = this.playCodeList.length - 1
this.chooseIndex = this.playCodeList.length - 1
} else {
this.$refs.hlsVideoPlayer.chooseIndex = this.playCodeList.length
this.chooseIndex = this.playCodeList.length
}
this.layoutName = name
this.layoutNum = nums
},
},
链接选择替换的几种处理(子组件页面)
// 进行视频替换
editUrl(code, src, name, index) {
this.isCanPlay = true
this.$set(this.urlList[index], 'isPlay', true)
this.$set(this.urlList[index], 'isEdit', true)
// this.$set(this.urlList[index], 'isError', false)
this.$set(this.urlList[index], 'code', code)
this.$set(this.urlList[index], 'url', src)
this.$set(this.urlList[index], 'name', name)
this.$nextTick(() => {
this.playerList[index].src(this.makeUrlSource(src))
this.playerList[index].load()
})
},
// 编辑替换：字段设置
editIsPlay(index, isPlay) {
console.log(index)
if (this.urlList[index]) {
if (isPlay && this.urlList[index]['isEdit']) {
this.$set(this.urlList[index], 'isPlay', isPlay)
} else {
this.$set(this.urlList[index], 'isPlay', isPlay)
}
if (!isPlay) {
this.$set(this.urlList[index], 'isEdit', false)
}
}
},
// 编辑替换：视频替换
resetEdit(code, src, name, index) {
if (this.urlList[index]) {
if (this.urlList[index]['isEdit']) {
// 可直接编辑
this.editUrl(code, src, name, index)
} else {
// 走销毁后添加
this.handelVideoUrl2(code, src, name, index)
}
}
},
videojs官网：https://docs.videojs.com/
样式相关参考链接：https://blog.csdn.net/maofengwoaini/article/details/120786907
videojs事件监听参考链接：https://blog.csdn.net/zhu_zhu_xia/article/details/122577153
