做自媒体与做网站,企业官网建设_创意网站建设,邯郸做淘宝网站,企业门户网站建设方案后台管理文章目录 1.背景2.问题分析3.解决方案3.1解决思路3.2解决过程3.2.1 封装播放组件3.2.2 隐形的视频div3.2.3 截取封面图 3.3 结束 1.背景
有这样一个需求#xff1a;
给你一个监控列表#xff0c;每页展示多个监控#xff08;至少12个#xff0c;m3u8格式#xff09;
给你一个监控列表每页展示多个监控至少12个m3u8格式且展示每个监控的第一帧画面的封面图但是后端没给你返回封面图点击监控时可以查看具体的监控弹框支持全屏
那么、你会怎么办呢 后端说后端获取封面图会比较麻烦还要单独引入一个模块所以丢给前端来做喽 备注本例仅为思路分析具体代码需要具体实现 实现效果如下
2.问题分析
首先有的vue2的视频流播放组件支持多个视频流同时播放但那是定制的4宫格或9宫格不够自由或者有的支持多视频流播放但是本人暂未找到其实也可以自定义实现多流播放其次即使有这种组件但是毕竟是网页端如果一直播放性能肯定会扛不住毕竟一直接收视频片段这个是巨量的。所以还是老老实实地想办法获取第一帧封面图吧 备注前端用的vue2 下图为多视频流播放的示例图 但是这样会出现一个问题那就是你会获取无止境的m3u8推流不久你的浏览器就会内存溢出内存将不断增大下图非只是初始时的截图 作为对比看下只用封面截图的网页资源占用
所以上述方案作废 由于上述方案作废所以此处不做多视频流同时播放的代码示例了。 3.解决方案
3.1解决思路
在监控列表页放一个隐藏的divdiv中放的是视频播放组件然后循环播放在播放的时候截取封面用的html2canvas将截取的封面处理进监控列表的数组中销毁隐藏的视频流播放的div
3.2解决过程
3.2.1 封装播放组件
首先你要有一个支持m3u8播放的vue组件本例用的是hls.min.js将这个js文件放在/public/js/hls.min.js下。
然后封装的组件示例如下hlsVideo.vue
!-- 视频巡检专用其他组件勿用 --
templatediv videoidhlsclassimg-responsive video-js vjs-default-skincontrolsrefvideoRefpreloadauto:autoplayautoplay:mutedmuted:style{ width: width, height: height }/video/div
/templatescript
let hlsPlayer
export default {props: {// 监控地址videoUrl: { type: String, default: },// 监控宽高width: { type: String, default: 100% },height: { type: String, default: 100% },// 自动播放autoplay: { type: Boolean, default: true },// 是否静音默认静音muted: { type: Boolean, default: true }},watch: {videoUrl: {deep: true,handler(val) {if ( hlsPlayer ! null ) {hlsPlayer.destroy()}this.handlePlayer()}}},mounted() {this.handlePlayer()},beforeDestroy() {if ( hlsPlayer! null ) {hlsPlayer.destroy()hlsPlayer null}},methods: {// emit 发送播放状态handlePlayer() {if(this.videoUrl) {const video this.$refs.videoRefhlsPlayer new Hls();hlsPlayer.loadSource(this.videoUrl);hlsPlayer.attachMedia(video);//将视频元素绑定到此 HLS 对象hlsPlayer.on(Hls.Events.MANIFEST_PARSED, () {video.play();this.$emit(playing, true);});hlsPlayer.on(Hls.Events.ERROR, (eventName, data) {if ( data.fatal data.type ! networkError ) {video.pause();this.$emit(playing, false);}});} else {if ( hlsPlayer ! null ) {hlsPlayer.destroy()}}},}
}
/script
style langscss scoped
::v-deep {// 隐藏视频监控进度条video::-webkit-media-controls-timeline {display: none;}// 隐藏视频监控剩余时间video::-webkit-media-controls-time-remaining-display {display: none;}
}
/style
3.2.2 隐形的视频div
有了视频播放组件我们只需要引入即可
import HlsVideo from /componentsUser/m3u8Video/hlsVideo.vue;然后在页面中写一个div元素来放置该组件 !-- 隐藏区域用于截取封面图 --div classhide-videohls-videov-iftempVideoUrl:video-urltempVideoUrlidhiddenVideorefhiddenRef:autoplaytrueplayingchangePlayStatus//div再加上样式让我们看不见它让它自己截图玩去吧CSS样式如下
.hide-video {width: 300px;height: 180px;position: absolute;top: 0;left: 0;z-index: -2;
}同时在data中声明以下变量 tempVideoUrl: null, // 隐藏的m3u8播放路径tempVideoIndex: 0, // 隐藏播放的当前下标用户循环monitorList: [], // 监控列表3.2.3 截取封面图
获取监控列表然后进行截图处理 请确保已引入如下插件 import html2canvas from ‘html2canvas’; 获取监控列表也就是正常的接口请求 // 获取监控列表getList() {this.loading truelistDevice(this.queryParams).then(res {const tempArr res.rows.map(item {return {deviceCode: item.deviceCode,type1Name: item.type1Name,type2Name: item.type2Name,name: item.name,deviceLocation: item.deviceLocation,status: item.status,videoUrl: null, // 监控地址接口未返回下面单独的接口循环获取最好还是让后端返回吧posterImg: null, // 默认封面为空下面循环截取}})this.total res.totalthis.loading falsethis.isFirstLoading falsethis.requestAllVideoUrl(tempArr)})},由于监控列表未返回m3u8的地址所以此处需要再次循环请求获取地址 你们最好让你们的后端把地址也返回不然前端循环获取不太好 /** 循环请求获取监控地址todo:并且截取封面图 */requestAllVideoUrl(tempArr) {for(let i 0; i tempArr.length; i) {const id tempArr[i].deviceCode// 离线值为2的直接空值省略请求if(!!id tempArr[i].status ! 2) {getVideo({channelId: id,}).then(res {tempArr[i].videoUrl res.data || null})}}this.monitorList tempArr// 初始设置第一个监控地址给隐藏的视频模仿组件然后下面才可以循环截图let timer2 setInterval(() {if(tempArr[0].videoUrl) {this.tempVideoUrl tempArr[0].videoUrlclearInterval(timer2)}}, 100)},
我们在上面的hlsVideo.vue组件中写了
this.$emit(playing, true);
this.$emit(playing, false);目的是当一个m3u8播放成功后就告诉组件我播放完了你可以截图了并且可以切换下一个m3u8地址了。
具体的截图代码如下 // todo:视频改变播放状态执行截图功能changePlayStatus(e) {if(e) {setTimeout(() {this.$nextTick(() {if(this.$refs.hiddenRef) {const video_width 396const video_height 180const dom document.getElementById(hiddenVideo);html2canvas(dom, {windowWidth: video_width * 1.78,windowHeight: video_height * 1.78,x: 0,y: 0,useCORS: true, //跨域scale: 0.8,}).then(canvas {// 截图的base64位图片const imgData canvas.toDataURL(image/jpeg, 1.0);// console.log(index, this.tempVideoIndex, imgData)this.monitorList[this.tempVideoIndex].posterImg imgDataif(this.tempVideoIndex this.monitorList.length - 1) {this.tempVideoIndexif(this.monitorList[this.tempVideoIndex].status ! 0) {this.tempVideoUrl this.monitorList[this.tempVideoIndex].videoUrl} else {this.tempVideoIndexthis.tempVideoUrl this.monitorList[this.tempVideoIndex].videoUrl}} else {this.tempVideoUrl null}})}})}, 500)}3.3 结束
至此截图完毕截图就是最上面放的截图此处不重复放了
也成功地把封面图赋值给监控列表了M3u8也销毁了监控列表现在放的是图片也不存在内存溢出等性能问题了 本例仅做思路具体代码具体对待
