根据勾选的节点数，展示单屏还是4分屏来播放视频，视频可删除与下载。 `

2、引入js

import Hls from 'hls.js' import { getTreeData } from "./api/index.js"

3、

` data() { return { searchValue: "", treeData: [ { id: 1, parentId: 0, name: "父节点1", parent: true, onlineNum: 1, totalNum: 4, children: [ { id: 2, parentId: 1, name: "子节点1", deviceCode: "1000022", channelSeq: 0, }, { id: 3, parentId: 1, name: "子节点2", deviceCode: "1000035", channelSeq: 0, } ] },

                { 
                    id: 15, 
                    parentId: 0, 
                    name: "父节点2",
                    parent: true,
                    onlineNum: 1,
                    totalNum: 4,
                    children: [
                        { id: 4, parentId: 15, name: "子节点1", deviceCode: "1000013", channelSeq: 2, },
                        { id: 5, parentId: 15, name: "子节点2", deviceCode: "1000013", channelSeq: 3, },
                        { id: 6, parentId: 15, name: "子节点3", deviceCode: "1000013", channelSeq: 6, },
                        { id: 7, parentId: 15, name: "子节点4", deviceCode: "1000013", channelSeq: 7, }
                    ]
                }
            ],
            defaultProps: {
                children: 'encoderChnList',
                label: 'name'
            },
            startTime: "",
            endTime: "",
            screenNum: [
                {
                    name: "单屏", 
                    value: 1
                },
                {
                    name: "四分屏",
                    value: 4
                }
            ],
            currentNum: 0,
            playCount: 1,
            videoUrlArr: [],
            hls: [],
            showDownloadDialog: false,
            downloadTime1: "",
            downloadTime2: "",
            currentDownload: {}
        }
    },
    watch: {
        searchValue(val) {
            this.$refs.videoTree.filter(val);
        }
    },
    mounted() {
        this.startTime = moment().format('yyyy-MM-DD') + " 00:00:00";
        this.endTime = moment().format('yyyy-MM-DD HH:mm:ss');
        this.getTreeData();
    },
    methods:{
        filterNode(value, data) {
            console.log(value, data);
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        closeDialog() {
            this.showDownloadDialog = false;
            this.downloadTime1 = "";
            this.downloadTime2 = "";
        },
        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); 
            console.log(video);
            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 > 3600000) {
                this.$message.error("请选择1小时内的时间区间");
                return;
            }
            let downloadUrl = `/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;
        },
        //关闭视频播放
        closeVideoPlay(i) {
            this.videoUrlArr[i].url ="";
            this.$refs.videoTree.setChecked(this.videoUrlArr[i].channelName, false);
            this.hls[i].destroy();
        },
      
    }