22、hls拉流之录像回放-中

methods: {
            handleCheckChange(data, checked, indeterminate){
                console.log(data, checked, indeterminate);
            },
            filterNode(value, data) {
                console.log(value, data);
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            closeDialog() {
                this.downloadTime1 = "";
                this.downloadTime2 = "";
                this.showDownloadDialog = false;
            },
            getTreeData() {
                getTreeData().then(res => {
                    if(res.data.code == 200) {
                        this.treeData = res.data.data;
                        this.treeData.forEach(item => {
                            item.name = item.deviceName;
                            item.encoderChnList.forEach(r => {
                                r.name = r.channelName
                            })
                        })
                        console.log(this.treeData);
                    }
                })
            },
            //播放视频
            playVideo(item, i) {
                let video = document.getElementById(item.deviceCode + i); 
                this.hls[i] = new Hls();
                this.hls[i].loadSource(item.url);
                this.hls[i].attachMedia(video);
                this.hls[i].on(Hls.Events.MANIFEST_PARSED, () => {
                    video.play();
                });
                this.hls[i].on(Hls.Events.ERROR, (event, data) => {
                    // 监听出错事件
                    console.log("加载失败", event, data);
                });
            },
            startDownload(item) {
                this.showDownloadDialog = true;
                this.currentDownload = item;
            },
            //下载视频
            downloadVideo() {
                let time1 = moment(this.downloadTime1).format("X");
                let time2 = moment(this.downloadTime2).format("X");
                let len = time2 - time1;
                if(len > 3600) {
                    this.$message.error("请选择1小时内的时间区间");
                    return;
                }
                let downloadUrl = `http://10.13.126.92:8282/template/video/download?deviceCode=${this.currentDownload.deviceCode}&channelNum=${this.currentDownload.channelNum}&startTime=${this.downloadTime1}&endTime=${this.downloadTime2}&channelName=${this.currentDownload.channelName}`
                window.location.href = downloadUrl;
                this.showDownloadDialog = false;
                this.downloadTime1 = "";
                this.downloadTime2 = "";
            },
            //查询
            query() {
                this.videoUrlArr = [];
                let nodes = this.$refs.videoTree.getCheckedNodes();
                let childNodes = nodes.filter(item => !item.parent)
                if(childNodes.length > 4) {
                    this.$message.error("勾选的节点不能超出4个,请重新选择！");
                    return;
                }
                this.playCount = childNodes.length > 1 ? 4 : 1;//展示 4屏:单屏
                this.currentNum = childNodes.length > 1 ? 1 : 0;//点击单屏:4屏
                let startTime = moment(this.startTime).format('X');
                let endTime = moment(this.endTime).format('X');
                let timeLength = Number(endTime) - Number(startTime);
                for(let i = 0; i< childNodes.length; i++) {
                    // const url = "http://localhost:7086/live/cameraid/" + childNodes[i].deviceCode + "%24" + childNodes[i].channelSeq + "/substream/1.m3u8?" + "token=1:f095600f-39cc-4c1c-b5b9-0d21577a91c8";
                    let host = window.location.host.split(":")[0];
                    let url = 'http://localhost:7086/vod/device/cameraid/'+ childNodes[i].deviceCode + '%24'+ childNodes[i].channelSeq + '/substream/1/recordtype/1/totallength/' + timeLength + '/begintime/'+startTime+'/endtime/'+endTime+'.m3u8';
                    this.videoUrlArr.push(
                        {
                            url: url,
                            deviceCode: childNodes[i].deviceCode,
                            channelNum: childNodes[i].channelSeq,
                            channelName: childNodes[i].channelName
                        }
                    );
                }
                this.$nextTick(() => {
                    this.videoUrlArr.forEach((item, index) => {
                        this.playVideo(item, index);
                    })
                })
            },
            //关闭视频播放
            closeVideoPlay(i) {
                this.videoUrlArr[i].url ="";
                this.$refs.videoTree.setChecked(this.videoUrlArr[i].channelName, false);
                this.hls[i].destroy();
            },
            //改变分屏
            changeNum(item, index) {
                this.currentNum = index;
                this.playCount = item.value;
                if(this.playCount == 1 && this.videoUrlArr.length > 1) {
                    this.videoUrlArr = [this.videoUrlArr[0]];
                }
            }
        },
        beforeDestroy() {
            for(let i = 0; i< this.hls; i++) {
                this.hls[i].destroy();
            }
        }