flv 4 9 16 分屏全屏

深藏阁楼爱情的钟 2022-08-29 00:01 28阅读 0赞

### 文章目录 ###

*  前言
 *  一、效果图
 *  二、完整代码
 *   *  1.代码

--------------------

# 前言 #

1.  http请求直播流浏览器最多支持6路视频同时播放，ws没有限制。
2.  样式根据16:9做的适配
3.  希望可以帮到有需要的人

--------------------

提示：以下是本篇文章正文内容，下面案例可供参考

# 一、效果图 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA2NDU0ODk_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA2NDU0ODk_size_16_color_FFFFFF_t_70_pic_center 1]

# 二、完整代码 #

## 1.代码 ##

代码如下（示例）：

<template>
      <div style="height: 90%">
        <el-container class="center container">
          <el-aside width="3rem">
            <el-tabs
              v-model="equipmentList"
              type="card"
              @tab-click="equipmentListHandleClick"
              :before-leave="beforeLeaveTab"
            >
              <div class="search">
                <el-input v-if="equipmentList==='first'"
                          v-model="equipmentName"
                          placeholder="请输入设备名称"
                ></el-input>
                <el-input v-else
                          v-model="pollingName"
                          placeholder="请输入设备名称"
                ></el-input>
                <el-button class="el-icon-right"></el-button>
              </div>
              <el-tab-pane label="设备列表" name="first">
                <el-tree
                  class="filter-tree"
                  :data="data"
                  :props="defaultProps"
                  highlight-current
                  node-key="id"
                  @node-click="nodeclick"
                  default-expand-all
                  :filter-node-method="filterNode"
                  ref="treeone"
                >
                </el-tree>
              </el-tab-pane>
              <el-tab-pane label="轮询列表" name="second">
                
                
                
                
                
                
                
                
                <el-tree
                  class="filter-tree"
                  :data="data"
                  node-key="id"
                  highlight-current
                  :props="defaultProps"
                  @node-click="nodeclickSingle"
                  :filter-node-method="twofilterNode"
                  default-expand-all
                  ref="treetwo"
                >
                </el-tree>
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
              </el-tab-pane>
            </el-tabs>
          </el-aside>
    
          <el-main>
            <div class="video-list" id="shipin">
              <div
                v-for="(n, index) in forping"
                class="video-item"
                :class="{
                  itemWidth4: fornum === 4,
                  itemWidth9: fornum === 9,
                  itemWidth16: fornum === 16,
                }"
                :key="index"
              >
                <div
                  class="player-wrapper"
                  :id="`videoid${index}`"
                  element-loading-text="加载中..."
                  element-loading-background="#000"
                >
                  <div @click="jumpcamera(index,n)">
                    <div class="no-sigin-box"
                         :class="{
                        videoWidth4: fornum === 4,
                        videoWidth9: fornum === 9,
                        videoWidth16: fornum === 16,
                        'no-border': fullscreen
                      }"
                         v-if="n.url === ''"
                    >
                      <div class="no-sigin">
                        无信号{
       { index + 1 }}
                      </div>
                    </div>
                    <div
                      v-else
                      :class="{
                        videoWidth4: fornum === 4&&!fullscreen,
                        videoWidth9: fornum === 9&&!fullscreen,
                        videoWidth16: fornum === 16&&!fullscreen,
                       scrrenVideowidth4: fullscreen&&classtype2 === 'primary',
                       scrrenVideowidth9: fullscreen&&classtype3 === 'primary',
                       scrrenVideowidth16: fullscreen&&classtype4 === 'primary',
                      }"
                    >
                      <video
                        :id="'v' + index"
                        :src="n.url"
                        :ref="index"
                        autoplay
                        muted
                        poster="../../assets/img/loading.gif"
                        :class="{
                        videoWidth4: fornum === 4&&!fullscreen,
                        videoWidth9: fornum === 9&&!fullscreen,
                        videoWidth16: fornum === 16&&!fullscreen,
                        scrrenVideowidth4: fullscreen&&classtype2 === 'primary',
                        scrrenVideowidth9: fullscreen&&classtype3 === 'primary',
                        scrrenVideowidth16: fullscreen&&classtype4 === 'primary',
                      }"
                        style="width: 100%"
                      ></video>
                      <i v-show="!fullscreen" class="el-icon-close" @click.stop="xhvideo(index)"></i>
                    </div>
    
                    
                  </div>
                </div>
              </div>
            </div>
    
            <div class="grid-content bg-purple">
              
              <el-button :type="classtype2" @click="selecttype('classtype2', 4, 12)"
              >四分屏
              </el-button
              >
              <el-button :type="classtype3" @click="selecttype('classtype3', 9, 8)"
              >九分屏
              </el-button
              >
              <el-button :type="classtype4" @click="selecttype('classtype4', 16, 6)"
              >十六分屏
              </el-button
              >
              <el-button class="btn-fullscreen" @click="handleFullScreen"
              >全屏
              </el-button
              >
            </div>
          </el-main>
        </el-container>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
          这是测试
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
            >确 定
            </el-button
            >
          </div>
        </el-dialog>
      </div>
    </template>
    
    <script>
      import flvjs from "flv.js";
      import {getToken} from '../../util'
    
      export default {
        data() {
          return {
            currentnodekey: -1,
            someWindow: [1],
            equipmentList: "first",
            pollingList: "first",
            equipmentName: "",
            pollingName: "",
            fullscreen: false,
            fornum: 4,
            clonum: 12,
            dialogFormVisible: false,
            videoclass:
              "padding-bottom: 40.25%; position: relative; margin: 0px auto; overflow: hidden;",
            classtype1: "",
            classtype2: "primary",  //  2 四分屏  3 九分屏 4 十六分屏
            classtype3: "",
            classtype4: "",
            saveSession: {
              equipmentList: this.equipmentList,
              pollingList: this.pollingList,
              forping: this.forping,
              allping: this.allping,
              classtype1: this.classtype1,
              classtype2: this.classtype2,
              classtype3: this.classtype3,
              classtype4: this.classtype4,
              videoplayer: [],
              fornum: 0,
            },
            forping: [
              {
                url: "",
              },
              {
                url: "",
              },
              {
                url: "",
              },
              {
                url: "",
              },
            ],
            defaultping: [],
            allping: [],
            fourPing: [],
            ninePing: [],
            tmpPing: [],
            initvideo: [],
            shiliuPing: [],
            videoplayer: [],
            singleTime: null,
            someTime: null,
            starindex: 0,
            endindex: 0,
            forindex: 4,
            winSome: 4,
            somePing0: [],
            somePing1: [],
            somePing2: [],
            somePing3: [],
            somePing4: [],
            somePing5: [],
            somePing6: [],
            somePing7: [],
            somePing8: [],
            somePing9: [],
            somePing10: [],
            somePing11: [],
            somePing12: [],
            somePing13: [],
            somePing14: [],
            somePing15: [],
            liveBroadcastTimer: null,
            items: [false, false, false, false],
            //data: [],
            data: [{
              "children": [{
                "children": [{
                  "index": 3,
                  "id": 1,
                  "label": "设备11",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }, {"index": 3, "id": 2, "label": "设备12", "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"}],
                "id": 3,
                "label": "2"
              }, {
                "children": [{
                  "index": 3,
                  "id": 4,
                  "label": "设备13",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }],
                "id": 5,
                "label": "3"
              }, {
                "children": [{
                  "index": 3,
                  "id": 6,
                  "label": "设备14",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }, {"index": 3, "id": 7, "label": "设备15", "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"}],
                "id": 8,
                "label": "5"
              }, {
                "children": [{
                  "index": 3,
                  "id": 9,
                  "label": "设备16",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }],
                "id": 10,
                "label": "6"
              }, {
                "children": [{
                  "index": 3,
                  "id": 11,
                  "label": "设备17",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }],
                "id": 12,
                "label": "7"
              }, {
                "children": [{"index": 3, "id": 13, "label": "设备18", "url": "http://47.94.39.191:81/live/test_2.flv"}],
                "id": 14,
                "label": "8"
              }], "id": 15, "label": "1"
            }, {
              "children": [{
                "children": [{
                  "index": 3,
                  "id": 16,
                  "label": "设备11",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }, {"index": 3, "id": 17, "label": "设备12", "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"}],
                "id": 18,
                "label": "2"
              }, {
                "children": [{
                  "index": 3,
                  "id": 19,
                  "label": "设备13",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }],
                "id": 20,
                "label": "3"
              }, {
                "children": [{
                  "index": 3,
                  "id": 21,
                  "label": "设备14",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }, {"index": 3, "id": 22, "label": "设备15", "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"}],
                "id": 23,
                "label": "5"
              }, {
                "children": [{
                  "index": 3,
                  "id": 24,
                  "label": "设备16",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }],
                "id": 25,
                "label": "6"
              }, {
                "children": [{
                  "index": 3,
                  "id": 26,
                  "label": "设备17",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }],
                "id": 27,
                "label": "7"
              }, {
                "children": [{
                  "index": 3,
                  "id": 28,
                  "label": "设备18",
                  "url": "http://1011.hlsplay.aodianyun.com/demo/game.flv"
                }],
                "id": 29,
                "label": "8"
              }], "id": 30, "label": "4"
            }],
            defaultProps: {
              children: "children",
              label: "label",
            },
          };
        },
        created() {
          this.videoMsgList();
          let that = this;
          window.onresize = function () {
            if (!that.checkFull()) {
              // 退出全屏后要执行的动作
              console.log("退出全屏");
              that.fullscreen = false;
              for (let n = 0; n < that.fornum; n++) {
                document.getElementById("videoid" + n).style =
                  "position: relative; margin: 0px auto;";
              }
            } else {
              for (let n = 0; n < that.fornum; n++) {
                document.getElementById("videoid" + n).style =
                  "position: relative; margin: 0px auto;";
              }
            }
          };
        },
        watch: {
          equipmentName(val) {
            this.$refs.treeone.filter(val);
          },
          pollingName(val) {
            this.$refs.treetwo.filter(val);
          },
        },
        beforeDestroy() {
          clearInterval(this.singleTime);
        },
        mounted() {
    
          //销毁定时器
          this.$once("hook:beforeDestroy", () => {
            clearInterval(this.singleTime);
            this.videoplayer.forEach((v, index) => {
              this.stopVideo(v);
            });
            this.videoplayer = [];
          });
        },
        methods: {
    
          videoMsgList() {
            this.$request.getVideoMsgList().then(res => {
              //this.data = res.result
              this.initSessionStorage();
            })
    
          },
          initSessionStorage() {
            let saveSession = JSON.parse(sessionStorage.getItem(getToken()))
            if (!saveSession) {
              return
            }
            this.equipmentList = saveSession.equipmentList;
            this.pollingList = saveSession.pollingList;
            this.forping = saveSession.forping;
            this.allping = saveSession.allping;
            this.videoplayer = saveSession.videoplayer;
            console.log(this.videoplayer, 'videoplayer')
            this.videoplayer.forEach((v, index) => {
              this.stopVideo(v);
            });
            this.videoplayer = [];
            if (saveSession.classtype1 === "primary") {
    
              this.classtype1 = "primary";
              this.classtype2 = "";
              this.classtype3 = "";
              this.classtype4 = "";
            } else if (saveSession.classtype2 === "primary") {
              this.fornum = 4;
              this.classtype1 = "";
              this.classtype2 = "primary";
              this.classtype3 = "";
              this.classtype4 = "";
            } else if (saveSession.classtype3 === "primary") {
              this.fornum = 9;
              this.classtype1 = "";
              this.classtype2 = "";
              this.classtype3 = "primary";
              this.classtype4 = "";
            } else {
              this.fornum = 16;
              this.classtype1 = "";
              this.classtype2 = "";
              this.classtype3 = "";
              this.classtype4 = "primary";
            }
            if (this.equipmentList === 'second') {
              if (this.classtype2 === "primary") {
    
                // this.allping.push(data);
                this.tmpPing = [];
                this.initvideo = [];
                if (this.allping.length > 4) {
                  for (let i = 0; i < 4; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.singleTime = setInterval(() => {
                    if (this.forindex >= this.allping.length) {
                      this.starindex = 0;
                      this.endindex = 4;
                      this.forindex = 4;
                    } else {
                      this.starindex = this.forindex;
                      this.endindex = this.forindex;
                      this.forindex = this.forindex + this.forindex;
                      if (this.allping.length - this.starindex < this.endindex) {
                        this.endindex = this.allping.length;
                      } else {
                        this.endindex = this.endindex + this.endindex;
                      }
                    }
                    this.tmpPing = this.allping.slice(this.starindex, this.endindex);
                    //console.log(this.starindex,this.endindex,this.allping.length,this.forindex,'setInterval')
                    this.defaultping.forEach((m, index) => {
                      if (this.tmpPing.length <= 3) {
                        this.tmpPing.push(m);
                      }
                    });
                    this.videoplayer.forEach((v, index) => {
                      this.stopVideo(v);
                    });
    
                    this.initvideo = this.allping.slice(
                      this.starindex,
                      this.endindex
                    );
                    this.forping = this.tmpPing;
                    this.initvideo.forEach((t, index) => {
                      this.$nextTick(() => {
                        let player = this.initLiveBroadcast(t.url, index);
                        this.videoplayer.push(player);
                      });
    
                    });
                    if (this.starindex === 0 && this.allping.length <= 4) {
                      clearInterval(this.singleTime);
                    }
                  }, 10000);
    
                  this.allping.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treetwo.getNode(m.id).isCurrent = true
                    }
                  })
    
                } else {
                  for (let i = 0; i < 4; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.allping.forEach((t, index) => {
                    this.tmpPing.push(t);
                    this.initvideo.push(t);
                  });
    
                  this.defaultping.forEach((m, index) => {
                    if (this.tmpPing.length <= 3) {
                      this.tmpPing.push(m);
                    }
                  });
                  this.forping = this.tmpPing;
                  this.$nextTick(() => {
                    let player;
                    this.tmpPing.forEach((t, i) => {
                      if (t.id) {
                        player = this.initLiveBroadcast(t.url, i);
                        this.videoplayer.push(player);
                      }
    
                    })
                    this.allping.forEach((m, index) => {
                      if (m.id) {
                        this.$refs.treetwo.getNode(m.id).isCurrent = true
                      }
                    })
                  });
                }
              }
              if (this.classtype3 === "primary") {
                //this.allping.push(data);
                this.tmpPing = [];
                this.initvideo = [];
                if (this.allping.length > 9) {
                  for (let i = 0; i < 9; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.singleTime = setInterval(() => {
                    if (this.forindex >= this.allping.length) {
                      this.starindex = 0;
                      this.endindex = 9;
                      this.forindex = 9;
                    } else {
                      this.starindex = this.forindex;
                      this.endindex = this.forindex;
                      this.forindex = this.forindex + this.forindex;
                      if (this.allping.length - this.starindex < this.endindex) {
                        this.endindex = this.allping.length;
                      } else {
                        this.endindex = this.endindex + this.endindex;
                      }
                    }
                    this.tmpPing = this.allping.slice(this.starindex, this.endindex);
                    //console.log(this.starindex,this.endindex,this.allping.length,this.forindex,'setInterval')
                    this.defaultping.forEach((m, index) => {
                      if (this.tmpPing.length <= 8) {
                        this.tmpPing.push(m);
                      }
                    });
                    this.videoplayer.forEach((v, index) => {
                      this.stopVideo(v);
                    });
    
                    this.initvideo = this.allping.slice(
                      this.starindex,
                      this.endindex
                    );
                    this.forping = this.tmpPing;
                    this.initvideo.forEach((t, index) => {
                      this.$nextTick(() => {
                        let player = this.initLiveBroadcast(t.url, index);
                        this.videoplayer.push(player);
                      });
                    });
                    if (this.starindex === 0 && this.allping.length <= 9) {
                      clearInterval(this.singleTime);
                    }
                  }, 10000);
                  this.allping.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treetwo.getNode(m.id).isCurrent = true
                    }
                  })
                } else {
                  for (let i = 0; i < 9; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.allping.forEach((t, index) => {
                    this.tmpPing.push(t);
                    this.initvideo.push(t);
                  });
    
                  this.defaultping.forEach((m, index) => {
                    if (this.tmpPing.length <= 8) {
                      this.tmpPing.push(m);
                    }
                  });
                  this.forping = this.tmpPing;
                  this.$nextTick(() => {
                    let player;
                    this.tmpPing.forEach((t, i) => {
                      if (t.id) {
                        player = this.initLiveBroadcast(t.url, i);
                        this.videoplayer.push(player);
                      }
                    })
                    this.allping.forEach((m, index) => {
                      if (m.id) {
                        this.$refs.treetwo.getNode(m.id).isCurrent = true
                      }
                    })
                  });
                }
              }
              if (this.classtype4 === "primary") {
                this.allping.push(data);
                this.tmpPing = [];
                this.initvideo = [];
                if (this.allping.length > 16) {
                  for (let i = 0; i < 16; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.singleTime = setInterval(() => {
                    if (this.forindex >= this.allping.length) {
                      this.starindex = 0;
                      this.endindex = 16;
                      this.forindex = 16;
                    } else {
                      this.starindex = this.forindex;
                      this.endindex = this.forindex;
                      this.forindex = this.forindex + this.forindex;
                      if (this.allping.length - this.starindex < this.endindex) {
                        this.endindex = this.allping.length;
                      } else {
                        this.endindex = this.endindex + this.endindex;
                      }
                    }
                    this.tmpPing = this.allping.slice(this.starindex, this.endindex);
                    //console.log(this.starindex,this.endindex,this.allping.length,this.forindex,'setInterval')
                    this.defaultping.forEach((m, index) => {
                      if (this.tmpPing.length <= 15) {
                        this.tmpPing.push(m);
                      }
                    });
                    this.videoplayer.forEach((v, index) => {
                      this.stopVideo(v);
                    });
                    this.initvideo = this.allping.slice(
                      this.starindex,
                      this.endindex
                    );
                    this.forping = this.tmpPing;
                    this.initvideo.forEach((t, index) => {
                      this.$nextTick(() => {
                        let player = this.initLiveBroadcast(t.url, index);
                        this.videoplayer.push(player);
                      });
                    });
                    if (this.starindex === 0 && this.allping.length <= 16) {
                      clearInterval(this.singleTime);
                    }
                  }, 10000);
                  this.allping.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treetwo.getNode(m.id).isCurrent = true
                    }
                  })
                } else {
                  for (let i = 0; i < 16; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.allping.forEach((t, index) => {
                    this.tmpPing.push(t);
                    this.initvideo.push(t);
                  });
    
                  this.defaultping.forEach((m, index) => {
                    if (this.tmpPing.length <= 15) {
                      this.tmpPing.push(m);
                    }
                  });
                  this.forping = this.tmpPing;
                  this.$nextTick(() => {
                    let player;
                    this.tmpPing.forEach((m, index) => {
                      if (m.id) {
                        player = this.initLiveBroadcast(m.url, index);
                        this.videoplayer.push(player);
                      }
                    })
                  });
                  this.allping.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treetwo.getNode(m.id).isCurrent = true
                    }
                  })
                }
              }
            }
            if (this.equipmentList === 'first') {
              if (this.classtype2 === "primary") {
                if (this.fourPing.length > 3) {
                  this.$message.warning("只可以选择4个设备");
                  return;
                }
                this.tmpPing = [];
                this.initvideo = [];
                this.forping.forEach(f => {
                  if (f.id) {
                    this.fourPing.push(f);
                    this.ninePing.push(f);
                    this.shiliuPing.push(f);
                  }
                })
                this.fourPing.forEach((f) => {
                  this.tmpPing.push(f);
                  this.initvideo.push(f);
                });
    
                for (let i = 0; i < 4; i++) {
                  this.defaultping.push({url: ""});
                }
                this.defaultping.forEach((m, index) => {
                  if (this.tmpPing.length <= 3) {
                    this.tmpPing.push(m);
                  }
                });
                this.forping = this.tmpPing;
                this.$nextTick(() => {
                  this.tmpPing.forEach((m, index) => {
                    if (m.id) {
                      let player = this.initLiveBroadcast(m.url, index);
                      this.videoplayer.push(player);
                      //  this.$refs.treeone.getNode(m.id).isCurrent = true
                    }
                  })
                });
                console.log(this.tmpPing, 'tmpPing')
                setTimeout(() => {
                  this.tmpPing.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treeone.getNode(m.id).isCurrent = true
                    }
                  })
                }, 1000)
              }
              //9
              if (this.classtype3 === "primary") {
                if (this.ninePing.length > 8) {
                  this.$message.warning("只可以选择9个设备");
                  return;
                }
                this.tmpPing = [];
                this.forping.forEach(f => {
                  if (f.id) {
                    this.ninePing.push(f);
                    this.shiliuPing.push(f);
                  }
                })
    
                this.ninePing.forEach((n) => {
                  this.tmpPing.push(n);
                });
                for (let i = 0; i < 9; i++) {
                  this.defaultping.push({url: ""});
                }
                this.defaultping.forEach((m, index) => {
                  if (this.tmpPing.length <= 8) {
                    this.tmpPing.push(m);
                  }
                });
                console.log(this.tmpPing, "tmpPing");
                this.forping = this.tmpPing;
                this.$nextTick(() => {
                  let player;
                  this.tmpPing.forEach((t, index) => {
                    if (t.id) {
                      player = this.initLiveBroadcast(t.url, index);
                      this.videoplayer.push(player);
                    }
                  });
                });
                setTimeout(() => {
                  this.tmpPing.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treeone.getNode(m.id).isCurrent = true
                    }
                  })
                }, 1000)
              }
              //16
              if (this.classtype4 === "primary") {
                if (this.shiliuPing.length > 15) {
                  this.$message.warning("只可以选择16个设备");
                  return;
                }
                this.tmpPing = [];
                this.forping.forEach(f => {
                  if (f.id) {
                    this.shiliuPing.push(f);
                  }
                })
                this.shiliuPing.forEach((n) => {
                  this.tmpPing.push(n);
                });
                for (let i = 0; i < 16; i++) {
                  this.defaultping.push({url: ""});
                }
                this.defaultping.forEach((m, index) => {
                  if (this.tmpPing.length <= 15) {
                    this.tmpPing.push(m);
                  }
                });
                this.forping = this.tmpPing;
                this.$nextTick(() => {
                  let player;
                  this.tmpPing.forEach((t, index) => {
                    player = this.initLiveBroadcast(t.url, index);
                    this.videoplayer.push(player);
                    if (t.id) {
                      this.$refs.treeone.getNode(t.id).isCurrent = true
                    }
                  });
                });
                setTimeout(() => {
                  this.tmpPing.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treeone.getNode(m.id).isCurrent = true
                    }
                  })
                }, 1000)
              }
            }
          },
          //多窗口轮询
          nodeclickSome(data, node, item, param) {
            if (data.index === 3) {
              if (param === 0) {
                this.somePing0.push(data);
              }
              if (param === 1) {
                this.somePing1.push(data);
              }
              if (param === 2) {
                this.somePing2.push(data);
              }
              if (param === 3) {
                this.somePing3.push(data);
              }
              if (param === 4) {
                this.somePing4.push(data);
              }
              if (param === 5) {
                this.somePing5.push(data);
              }
              if (param === 6) {
                this.somePing6.push(data);
              }
              if (param === 7) {
                this.somePing7.push(data);
              }
              if (param === 8) {
                this.somePing8.push(data);
              }
              if (param === 9) {
                this.somePing9.push(data);
              }
              if (param === 10) {
                this.somePing10.push(data);
              }
              if (param === 11) {
                this.somePing11.push(data);
              }
              if (param === 12) {
                this.somePing12.push(data);
              }
              if (param === 13) {
                this.somePing13.push(data);
              }
              if (param === 14) {
                this.somePing14.push(data);
              }
              if (param === 15) {
                this.somePing15.push(data);
              }
              clearInterval(this.someTime);
    
              if (this.classtype2 === "primary") {
                for (let i = 0; i < 4; i++) {
                  this.defaultping.push({url: ""});
                }
                let someIndex0 = 0,
                  someIndex1 = 0,
                  someIndex2 = 0,
                  someIndex3 = 0;
                this.someTime = setInterval(() => {
                  this.tmpPing = [];
                  let temArr;
                  temArr = this.somePing0.slice(someIndex0, someIndex0 + 1);
                  if (temArr.length === 0) {
                    someIndex0 = 0;
                    if (this.somePing0.slice(someIndex0, someIndex0 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing0.slice(someIndex0, someIndex0 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing0.slice(someIndex0, someIndex0 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing1.slice(someIndex1, someIndex1 + 1);
                  if (temArr.length === 0) {
                    someIndex1 = 0;
                    if (this.somePing1.slice(someIndex1, someIndex1 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing1.slice(someIndex1, someIndex1 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing1.slice(someIndex1, someIndex1 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing2.slice(someIndex2, someIndex2 + 1);
                  if (temArr.length === 0) {
                    someIndex2 = 0;
                    if (this.somePing2.slice(someIndex2, someIndex2 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing2.slice(someIndex2, someIndex2 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing2.slice(someIndex2, someIndex2 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing3.slice(someIndex3, someIndex3 + 1);
                  if (temArr.length === 0) {
                    someIndex3 = 0;
                    if (this.somePing3.slice(someIndex3, someIndex3 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing3.slice(someIndex3, someIndex3 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing3.slice(someIndex3, someIndex3 + 1)[0]
                    );
                    temArr = [];
                  }
                  someIndex0 = someIndex0 + 1;
                  someIndex1 = someIndex1 + 1;
                  someIndex2 = someIndex2 + 1;
                  someIndex3 = someIndex3 + 1;
                  this.videoplayer.forEach((v, index) => {
                    this.stopVideo(v);
                  });
                  this.defaultping.forEach((m, index) => {
                    if (this.tmpPing.length <= 3) {
                      this.tmpPing.push(m);
                    }
                  });
                  console.log(this.tmpPing, "tmpPing");
                  this.forping = this.tmpPing;
                  this.tmpPing.forEach((t, index) => {
                    if (t.url !== "") {
                      this.$nextTick(() => {
                        let player = this.initLiveBroadcast(t.url, index);
                        this.videoplayer.push(player);
                      });
                    }
                  });
                }, 10000);
              }
              if (this.classtype3 === "primary") {
                for (let i = 0; i < 9; i++) {
                  this.defaultping.push({url: ""});
                }
                let someIndex0 = 0,
                  someIndex1 = 0,
                  someIndex2 = 0,
                  someIndex3 = 0;
                someIndex4 = 0;
                someIndex5 = 0;
                someIndex6 = 0;
                someIndex7 = 0;
                someIndex8 = 0;
                this.someTime = setInterval(() => {
                  this.tmpPing = [];
                  let temArr;
                  temArr = this.somePing0.slice(someIndex0, someIndex0 + 1);
                  if (temArr.length === 0) {
                    someIndex0 = 0;
                    if (this.somePing0.slice(someIndex0, someIndex0 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing0.slice(someIndex0, someIndex0 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing0.slice(someIndex0, someIndex0 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing1.slice(someIndex1, someIndex1 + 1);
                  if (temArr.length === 0) {
                    someIndex1 = 0;
                    if (this.somePing1.slice(someIndex1, someIndex1 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing1.slice(someIndex1, someIndex1 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing1.slice(someIndex1, someIndex1 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing2.slice(someIndex2, someIndex2 + 1);
                  if (temArr.length === 0) {
                    someIndex2 = 0;
                    if (this.somePing2.slice(someIndex2, someIndex2 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing2.slice(someIndex2, someIndex2 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing2.slice(someIndex2, someIndex2 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing3.slice(someIndex3, someIndex3 + 1);
                  if (temArr.length === 0) {
                    someIndex3 = 0;
                    if (this.somePing3.slice(someIndex3, someIndex3 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing3.slice(someIndex3, someIndex3 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing3.slice(someIndex3, someIndex3 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing4.slice(someIndex4, someIndex4 + 1);
                  if (temArr.length === 0) {
                    someIndex4 = 0;
                    if (this.somePing4.slice(someIndex4, someIndex4 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing4.slice(someIndex4, someIndex4 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing4.slice(someIndex4, someIndex4 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing5.slice(someIndex5, someIndex5 + 1);
                  if (temArr.length === 0) {
                    someIndex5 = 0;
                    if (this.somePing5.slice(someIndex5, someIndex5 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing5.slice(someIndex5, someIndex5 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing5.slice(someIndex5, someIndex5 + 1)[0]
                    );
                    temArr = [];
                  }
    
                  temArr = this.somePing6.slice(someIndex6, someIndex6 + 1);
                  if (temArr.length === 0) {
                    someIndex6 = 0;
                    if (this.somePing6.slice(someIndex6, someIndex6 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing6.slice(someIndex6, someIndex6 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing6.slice(someIndex6, someIndex6 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing7.slice(someIndex7, someIndex7 + 1);
                  if (temArr.length === 0) {
                    someIndex7 = 0;
                    if (this.somePing7.slice(someIndex7, someIndex7 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing7.slice(someIndex7, someIndex7 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing7.slice(someIndex7, someIndex7 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing8.slice(someIndex8, someIndex8 + 1);
                  if (temArr.length === 0) {
                    someIndex8 = 0;
                    if (this.somePing8.slice(someIndex8, someIndex8 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing8.slice(someIndex8, someIndex8 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing8.slice(someIndex8, someIndex8 + 1)[0]
                    );
                    temArr = [];
                  }
                  someIndex0 = someIndex0 + 1;
                  someIndex1 = someIndex1 + 1;
                  someIndex2 = someIndex2 + 1;
                  someIndex3 = someIndex3 + 1;
                  someIndex4 = someIndex4 + 1;
                  someIndex5 = someIndex5 + 1;
                  someIndex6 = someIndex6 + 1;
                  someIndex7 = someIndex7 + 1;
                  someIndex8 = someIndex8 + 1;
                  this.videoplayer.forEach((v, index) => {
                    this.stopVideo(v);
                  });
                  this.defaultping.forEach((m, index) => {
                    if (this.tmpPing.length <= 8) {
                      this.tmpPing.push(m);
                    }
                  });
                  console.log(this.tmpPing, "tmpPing");
                  this.forping = this.tmpPing;
                  this.tmpPing.forEach((t, index) => {
                    if (t.url !== "") {
                      this.$nextTick(() => {
                        let player = this.initLiveBroadcast(t.url, index);
                        this.videoplayer.push(player);
                      });
                    }
                  });
                }, 10000);
              }
              if (this.classtype4 === "primary") {
                for (let i = 0; i < 16; i++) {
                  this.defaultping.push({url: ""});
                }
                let someIndex0 = 0,
                  someIndex1 = 0,
                  someIndex2 = 0,
                  someIndex3 = 0;
                someIndex4 = 0;
                someIndex5 = 0;
                someIndex6 = 0;
                someIndex7 = 0;
                someIndex8 = 0;
                someIndex9 = 0;
                someIndex10 = 0;
                someIndex11 = 0;
                someIndex12 = 0;
                someIndex13 = 0;
                someIndex14 = 0;
                someIndex15 = 0;
                this.someTime = setInterval(() => {
                  this.tmpPing = [];
                  let temArr;
                  temArr = this.somePing0.slice(someIndex0, someIndex0 + 1);
                  if (temArr.length === 0) {
                    someIndex0 = 0;
                    if (this.somePing0.slice(someIndex0, someIndex0 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing0.slice(someIndex0, someIndex0 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing0.slice(someIndex0, someIndex0 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing1.slice(someIndex1, someIndex1 + 1);
                  if (temArr.length === 0) {
                    someIndex1 = 0;
                    if (this.somePing1.slice(someIndex1, someIndex1 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing1.slice(someIndex1, someIndex1 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing1.slice(someIndex1, someIndex1 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing2.slice(someIndex2, someIndex2 + 1);
                  if (temArr.length === 0) {
                    someIndex2 = 0;
                    if (this.somePing2.slice(someIndex2, someIndex2 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing2.slice(someIndex2, someIndex2 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing2.slice(someIndex2, someIndex2 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing3.slice(someIndex3, someIndex3 + 1);
                  if (temArr.length === 0) {
                    someIndex3 = 0;
                    if (this.somePing3.slice(someIndex3, someIndex3 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing3.slice(someIndex3, someIndex3 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing3.slice(someIndex3, someIndex3 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing4.slice(someIndex4, someIndex4 + 1);
                  if (temArr.length === 0) {
                    someIndex4 = 0;
                    if (this.somePing4.slice(someIndex4, someIndex4 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing4.slice(someIndex4, someIndex4 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing4.slice(someIndex4, someIndex4 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing5.slice(someIndex5, someIndex5 + 1);
                  if (temArr.length === 0) {
                    someIndex5 = 0;
                    if (this.somePing5.slice(someIndex5, someIndex5 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing5.slice(someIndex5, someIndex5 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing5.slice(someIndex5, someIndex5 + 1)[0]
                    );
                    temArr = [];
                  }
    
                  temArr = this.somePing6.slice(someIndex6, someIndex6 + 1);
                  if (temArr.length === 0) {
                    someIndex6 = 0;
                    if (this.somePing6.slice(someIndex6, someIndex6 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing6.slice(someIndex6, someIndex6 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing6.slice(someIndex6, someIndex6 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing7.slice(someIndex7, someIndex7 + 1);
                  if (temArr.length === 0) {
                    someIndex7 = 0;
                    if (this.somePing7.slice(someIndex7, someIndex7 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing7.slice(someIndex7, someIndex7 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing7.slice(someIndex7, someIndex7 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing8.slice(someIndex8, someIndex8 + 1);
                  if (temArr.length === 0) {
                    someIndex8 = 0;
                    if (this.somePing8.slice(someIndex8, someIndex8 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing8.slice(someIndex8, someIndex8 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing8.slice(someIndex8, someIndex8 + 1)[0]
                    );
                    temArr = [];
                  }
    
                  temArr = this.somePing9.slice(someIndex9, someIndex9 + 1);
                  if (temArr.length === 0) {
                    someIndex9 = 0;
                    if (this.somePing9.slice(someIndex9, someIndex9 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing9.slice(someIndex9, someIndex9 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing9.slice(someIndex9, someIndex9 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing10.slice(someIndex10, someIndex10 + 1);
                  if (temArr.length === 0) {
                    someIndex10 = 0;
                    if (this.somePing10.slice(someIndex10, someIndex10 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing10.slice(someIndex10, someIndex10 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing10.slice(someIndex10, someIndex10 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing11.slice(someIndex11, someIndex11 + 1);
                  if (temArr.length === 0) {
                    someIndex11 = 0;
                    if (this.somePing11.slice(someIndex11, someIndex11 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing11.slice(someIndex11, someIndex11 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing11.slice(someIndex11, someIndex11 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing12.slice(someIndex12, someIndex12 + 1);
                  if (temArr.length === 0) {
                    someIndex12 = 0;
                    if (this.somePing12.slice(someIndex12, someIndex12 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing12.slice(someIndex12, someIndex12 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing12.slice(someIndex12, someIndex12 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing13.slice(someIndex13, someIndex13 + 1);
                  if (temArr.length === 0) {
                    someIndex13 = 0;
                    if (this.somePing13.slice(someIndex13, someIndex13 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing13.slice(someIndex13, someIndex13 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing13.slice(someIndex13, someIndex13 + 1)[0]
                    );
                    temArr = [];
                  }
                  temArr = this.somePing14.slice(someIndex14, someIndex14 + 1);
                  if (temArr.length === 0) {
                    someIndex14 = 0;
                    if (this.somePing14.slice(someIndex14, someIndex14 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing14.slice(someIndex14, someIndex14 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing14.slice(someIndex14, someIndex14 + 1)[0]
                    );
                    temArr = [];
                  }
    
                  temArr = this.somePing15.slice(someIndex15, someIndex15 + 1);
                  if (temArr.length === 0) {
                    someIndex15 = 0;
                    if (this.somePing15.slice(someIndex15, someIndex15 + 1).length > 0) {
                      this.tmpPing.push(
                        this.somePing15.slice(someIndex15, someIndex15 + 1)[0]
                      );
                    } else {
                      this.tmpPing.push({url: ""});
                    }
                  } else {
                    this.tmpPing.push(
                      this.somePing15.slice(someIndex15, someIndex15 + 1)[0]
                    );
                    temArr = [];
                  }
                  someIndex0 = someIndex0 + 1;
                  someIndex1 = someIndex1 + 1;
                  someIndex2 = someIndex2 + 1;
                  someIndex3 = someIndex3 + 1;
                  someIndex4 = someIndex4 + 1;
                  someIndex5 = someIndex5 + 1;
                  someIndex6 = someIndex6 + 1;
                  someIndex7 = someIndex7 + 1;
                  someIndex8 = someIndex8 + 1;
                  someIndex9 = someIndex9 + 1;
                  someIndex10 = someIndex10 + 1;
                  someIndex11 = someIndex11 + 1;
                  someIndex12 = someIndex12 + 1;
                  someIndex13 = someIndex13 + 1;
                  someIndex14 = someIndex14 + 1;
                  someIndex15 = someIndex15 + 1;
                  this.videoplayer.forEach((v, index) => {
                    this.stopVideo(v);
                  });
                  this.defaultping.forEach((m, index) => {
                    if (this.tmpPing.length <= 15) {
                      this.tmpPing.push(m);
                    }
                  });
                  console.log(this.tmpPing, "tmpPing");
                  this.forping = this.tmpPing;
                  this.tmpPing.forEach((t, index) => {
                    if (t.url !== "") {
                      this.$nextTick(() => {
                        let player = this.initLiveBroadcast(t.url, index);
                        this.videoplayer.push(player);
                      });
                    }
                  });
                }, 10000);
              }
            }
          },
          //单窗口轮询
          nodeclickSingle(data, node, item) {
            if (data.index === 3) {
              clearInterval(this.singleTime);
              let flag = false;
              this.allping.forEach((t, index) => {
                if (t.id === data.id) {
                  flag = true;
                }
              })
              if (flag) {
                return;
              }
              if (this.classtype2 === "primary") {
                this.allping.push(data);
                this.tmpPing = [];
                this.initvideo = [];
                if (this.allping.length > 4) {
                  for (let i = 0; i < 4; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.singleTime = setInterval(() => {
                    console.log('timer')
                    if (this.forindex >= this.allping.length) {
                      this.starindex = 0;
                      this.endindex = 4;
                      this.forindex = 4;
                    } else {
                      this.starindex = this.forindex;
                      this.endindex = this.forindex;
                      this.forindex = this.forindex + this.forindex;
                      if (this.allping.length - this.starindex < this.endindex) {
                        this.endindex = this.allping.length;
                      } else {
                        this.endindex = this.endindex + this.endindex;
                      }
                    }
                    console.log(this.allping, this.starindex, this.endindex, 'dingshi')
                    this.tmpPing = this.allping.slice(this.starindex, this.endindex);
                    //console.log(this.starindex,this.endindex,this.allping.length,this.forindex,'setInterval')
                    this.defaultping.forEach((m, index) => {
                      if (this.tmpPing.length <= 3) {
                        this.tmpPing.push(m);
                      }
                    });
                    this.videoplayer.forEach((v, index) => {
                      this.stopVideo(v);
                    });
    
                    this.initvideo = this.allping.slice(
                      this.starindex,
                      this.endindex
                    );
                    this.forping = this.tmpPing;
                    this.initvideo.forEach((t, index) => {
                      this.$nextTick(() => {
                        let player = this.initLiveBroadcast(t.url, index);
                        this.videoplayer.push(player);
                      });
    
                    });
                    if (this.starindex === 0 && this.allping.length <= 4) {
                      clearInterval(this.singleTime);
                    }
                  }, 10000);
    
                  this.allping.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treetwo.getNode(m.id).isCurrent = true
                    }
                  })
    
                } else {
                  for (let i = 0; i < 4; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.allping.forEach((t, index) => {
                    this.tmpPing.push(t);
                    this.initvideo.push(t);
                  });
    
                  this.defaultping.forEach((m, index) => {
                    if (this.tmpPing.length <= 3) {
                      this.tmpPing.push(m);
                    }
                  });
                  this.forping = this.tmpPing;
                  this.$nextTick(() => {
                    let player;
                    let data = this.initvideo.pop();
                    let ind = this.initvideo.length;
                    player = this.initLiveBroadcast(data.url, ind);
                    this.videoplayer.push(player);
                    this.allping.forEach((m, index) => {
                      if (m.id) {
                        this.$refs.treetwo.getNode(m.id).isCurrent = true
                      }
                    })
                  });
                }
              }
              if (this.classtype3 === "primary") {
                this.allping.push(data);
                this.tmpPing = [];
                this.initvideo = [];
                if (this.allping.length > 9) {
                  for (let i = 0; i < 9; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.singleTime = setInterval(() => {
                    if (this.forindex >= this.allping.length) {
                      this.starindex = 0;
                      this.endindex = 9;
                      this.forindex = 9;
                    } else {
                      this.starindex = this.forindex;
                      this.endindex = this.forindex;
                      this.forindex = this.forindex + this.forindex;
                      if (this.allping.length - this.starindex < this.endindex) {
                        this.endindex = this.allping.length;
                      } else {
                        this.endindex = this.endindex + this.endindex;
                      }
                    }
                    this.tmpPing = this.allping.slice(this.starindex, this.endindex);
                    //console.log(this.starindex,this.endindex,this.allping.length,this.forindex,'setInterval')
                    this.defaultping.forEach((m, index) => {
                      if (this.tmpPing.length <= 8) {
                        this.tmpPing.push(m);
                      }
                    });
                    this.videoplayer.forEach((v, index) => {
                      this.stopVideo(v);
                    });
    
                    this.initvideo = this.allping.slice(
                      this.starindex,
                      this.endindex
                    );
                    this.forping = this.tmpPing;
                    this.initvideo.forEach((t, index) => {
                      this.$nextTick(() => {
                        let player = this.initLiveBroadcast(t.url, index);
                        this.videoplayer.push(player);
                      });
                    });
                    if (this.starindex === 0 && this.allping.length <= 9) {
                      clearInterval(this.singleTime);
                    }
                  }, 10000);
                  this.allping.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treetwo.getNode(m.id).isCurrent = true
                    }
                  })
                } else {
                  for (let i = 0; i < 9; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.allping.forEach((t, index) => {
                    this.tmpPing.push(t);
                    this.initvideo.push(t);
                  });
    
                  this.defaultping.forEach((m, index) => {
                    if (this.tmpPing.length <= 8) {
                      this.tmpPing.push(m);
                    }
                  });
                  this.forping = this.tmpPing;
                  this.$nextTick(() => {
                    let player;
                    let data = this.initvideo.pop();
                    let ind = this.initvideo.length;
                    player = this.initLiveBroadcast(data.url, ind);
                    this.videoplayer.push(player);
                    this.allping.forEach((m, index) => {
                      if (m.id) {
                        this.$refs.treetwo.getNode(m.id).isCurrent = true
                      }
                    })
                  });
                }
              }
              if (this.classtype4 === "primary") {
                this.allping.push(data);
                this.tmpPing = [];
                this.initvideo = [];
                if (this.allping.length > 16) {
                  for (let i = 0; i < 16; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.singleTime = setInterval(() => {
                    if (this.forindex >= this.allping.length) {
                      this.starindex = 0;
                      this.endindex = 16;
                      this.forindex = 16;
                    } else {
                      this.starindex = this.forindex;
                      this.endindex = this.forindex;
                      this.forindex = this.forindex + this.forindex;
                      if (this.allping.length - this.starindex < this.endindex) {
                        this.endindex = this.allping.length;
                      } else {
                        this.endindex = this.endindex + this.endindex;
                      }
                    }
                    this.tmpPing = this.allping.slice(this.starindex, this.endindex);
                    //console.log(this.starindex,this.endindex,this.allping.length,this.forindex,'setInterval')
                    this.defaultping.forEach((m, index) => {
                      if (this.tmpPing.length <= 15) {
                        this.tmpPing.push(m);
                      }
                    });
                    this.videoplayer.forEach((v, index) => {
                      this.stopVideo(v);
                    });
                    this.initvideo = this.allping.slice(
                      this.starindex,
                      this.endindex
                    );
                    this.forping = this.tmpPing;
                    this.initvideo.forEach((t, index) => {
                      this.$nextTick(() => {
                        let player = this.initLiveBroadcast(t.url, index);
                        this.videoplayer.push(player);
                      });
                    });
                    if (this.starindex === 0 && this.allping.length <= 16) {
                      clearInterval(this.singleTime);
                    }
                  }, 10000);
                  this.allping.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treetwo.getNode(m.id).isCurrent = true
                    }
                  })
                } else {
                  for (let i = 0; i < 16; i++) {
                    this.defaultping.push({url: ""});
                  }
                  this.allping.forEach((t, index) => {
                    this.tmpPing.push(t);
                    this.initvideo.push(t);
                  });
    
                  this.defaultping.forEach((m, index) => {
                    if (this.tmpPing.length <= 15) {
                      this.tmpPing.push(m);
                    }
                  });
                  this.forping = this.tmpPing;
                  this.$nextTick(() => {
                    let player;
                    let data = this.initvideo.pop();
                    let ind = this.initvideo.length;
                    player = this.initLiveBroadcast(data.url, ind);
                    this.videoplayer.push(player);
                  });
                  this.allping.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treetwo.getNode(m.id).isCurrent = true
                    }
                  })
                }
              }
            }
            this.saveSession.equipmentList = this.equipmentList
            this.saveSession.pollingList = this.pollingList
            this.saveSession.forping = this.forping
            this.saveSession.allping = this.allping
            this.saveSession.classtype1 = this.classtype1
            this.saveSession.classtype2 = this.classtype2
            this.saveSession.classtype3 = this.classtype3
            this.saveSession.classtype4 = this.classtype4
            this.saveSession.videoplayer = this.videoplayer
            this.saveSession.fornum = this.fornum;
            sessionStorage.setItem(getToken(), JSON.stringify(this.saveSession))
          },
          xhvideo(val) {
            console.log(val, 'xiaohuo')
            this.videoplayer.forEach((v, index) => {
              if (val === index) {
                this.stopVideo(v);
              }
            });
            this.videoplayer.splice(val, 1);
            this.videoplayer.splice(val, 0, null);
            console.log(this.videoplayer, 'xiaohuo')
            let allindex = -1;
            this.allping.forEach((m, index) => {
              if (this.forping[val].id === m.id) {
                allindex = index;
              }
            })
            if (allindex > -1) {
              this.allping.splice(allindex, 1);
            }
            this.$refs.treeone.getNode(this.forping[val].id).isCurrent = false
            this.$refs.treetwo.getNode(this.forping[val].id).isCurrent = false
            this.$refs.treeone.getNode(this.forping[val].id).data.label = this.$refs.treeone.getNode(this.forping[val].id).data.label.replace('(异常)', '');
            this.forping.splice(val, 1);
            this.forping.splice(val, 0, {id: "", index: "", label: "", url: ""});
            // this.$nextTick(() => {
            //   let player;
            //   this.forping.forEach((t, index) => {
            //       player = this.initLiveBroadcast(t.url, index);
            //       this.videoplayer.push(player);
            //   });
            // });
            //this.forping.push({id:"",index:"",label:"",url: ""});
            if (this.classtype2 === "primary") {
    
              this.fourPing.splice(val, 1);
              this.fourPing.splice(val, 0, {id: "", index: "", label: "", url: ""});
              this.ninePing.splice(val, 1);
              this.ninePing.splice(val, 0, {id: "", index: "", label: "", url: ""});
              this.shiliuPing.splice(val, 1);
              this.shiliuPing.splice(val, 0, {id: "", index: "", label: "", url: ""});
            }
            if (this.classtype3 === "primary") {
              this.ninePing.splice(val, 1);
              this.ninePing.splice(val, 0, {id: "", index: "", label: "", url: ""});
              this.shiliuPing.splice(val, 1);
              this.shiliuPing.splice(val, 0, {id: "", index: "", label: "", url: ""});
            }
            if (this.classtype4 === "primary") {
              this.shiliuPing.splice(val, 1);
              this.shiliuPing.splice(val, 0, {id: "", index: "", label: "", url: ""});
            }
            this.saveSession.equipmentList = this.equipmentList
            this.saveSession.pollingList = this.pollingList
            this.saveSession.forping = this.forping
            this.saveSession.allping = this.allping
            this.saveSession.classtype1 = this.classtype1
            this.saveSession.classtype2 = this.classtype2
            this.saveSession.classtype3 = this.classtype3
            this.saveSession.classtype4 = this.classtype4
            this.saveSession.videoplayer = this.videoplayer
            this.saveSession.fornum = this.fornum;
            sessionStorage.setItem(getToken(), JSON.stringify(this.saveSession))
    
          },
          //树形选中触发
          nodeclick(data, node, item) {
            this.forping.forEach((m, index) => {
              if (m.id) {
                this.$refs.treeone.getNode(m.id).isCurrent = true
              }
            })
    
            if (data.index === 3) {
              let flag = false;
              this.shiliuPing.forEach(s => {
                if (s.id === data.id) {
                  flag = true;
                }
              })
              if (flag) {
                return;
              }
              //4
              if (this.classtype2 === "primary") {
                let fourNum = 0;
                this.fourPing.forEach(f => {
                  if (f.url !== '') {
                    fourNum = fourNum + 1;
                  }
                })
                if (fourNum > 3) {
                  this.$message.warning("只可以选择4个设备");
                  return;
                }
                this.tmpPing = [];
                this.initvideo = [];
                let ind;
                try {
                  this.forping.forEach((f, index) => {
                    if (f.url === '') {
                      ind = index;
                      throw Error();
                    }
                  })
                } catch (err) {
                  console.log(err)
                }
                console.log(ind, 'ind')
                this.fourPing.splice(ind, 1);
                this.fourPing.splice(ind, 0, data);
                this.ninePing.splice(ind, 1);
                this.ninePing.splice(ind, 0, data);
                this.shiliuPing.splice(ind, 1);
                this.shiliuPing.splice(ind, 0, data);
                this.forping.splice(ind, 1);
                this.forping.splice(ind, 0, data);
                this.$nextTick(() => {
                  let player;
                  player = this.initLiveBroadcast(data.url, ind);
                  this.videoplayer.splice(ind, 1);
                  this.videoplayer.splice(ind, 0, player);
                  this.forping.forEach((m, index) => {
                    if (m.id) {
                      this.$refs.treeone.getNode(m.id).isCurrent = true
                    }
                  })
                });
              }
              //9
              if (this.classtype3 === "primary") {
                let nineNum = 0;
                this.ninePing.forEach(n => {
                  if (n.url !== '') {
                    nineNum = nineNum + 1;
                  }
                })
                if (nineNum > 8) {
                  this.$message.warning("只可以选择9个设备");
                  return;
                }
                let ind;
                try {
                  this.forping.forEach((f, index) => {
                    if (f.url === '') {
                      ind = index;
                      throw Error();
                    }
                  })
                } catch (err) {
                  console.log(err)
                }
                this.ninePing.splice(ind, 1);
                this.ninePing.splice(ind, 0, data);
                this.shiliuPing.splice(ind, 1);
                this.shiliuPing.splice(ind, 0, data);
                this.forping.splice(ind, 1);
                this.forping.splice(ind, 0, data);
                this.$nextTick(() => {
                  let player;
                  this.forping.forEach((t, index) => {
                    if (t.id === data.id) {
                      player = this.initLiveBroadcast(t.url, index);
                      this.videoplayer.splice(ind, 1);
                      this.videoplayer.splice(ind, 0, player);
                    }
                    if (t.id) {
                      this.$refs.treeone.getNode(t.id).isCurrent = true
                    }
                  });
                });
              }
              //16
              if (this.classtype4 === "primary") {
                let shiliuNum = 0;
                this.shiliuPing.forEach(s => {
                  if (s.url !== '') {
                    shiliuNum = shiliuNum + 1;
                  }
                })
                if (shiliuNum > 15) {
                  this.$message.warning("只可以选择16个设备");
                  return;
                }
                let ind;
                try {
                  this.forping.forEach((f, index) => {
                    if (f.url === '') {
                      ind = index;
                      throw Error();
                    }
                  })
                } catch (err) {
                  console.log(err)
                }
                this.shiliuPing.splice(ind, 1);
                this.shiliuPing.splice(ind, 0, data);
                this.forping.splice(ind, 1);
                this.forping.splice(ind, 0, data);
                this.$nextTick(() => {
                  let player;
                  this.forping.forEach((t, index) => {
                    if (t.id === data.id) {
                      player = this.initLiveBroadcast(t.url, index);
                      this.videoplayer.splice(ind, 1);
                      this.videoplayer.splice(ind, 0, player);
                    }
                    if (t.id) {
                      this.$refs.treeone.getNode(t.id).isCurrent = true
                    }
                  });
                });
              }
            }
            this.saveSession.equipmentList = this.equipmentList
            this.saveSession.pollingList = this.pollingList
            this.saveSession.forping = this.forping
            this.saveSession.allping = this.allping
            this.saveSession.classtype1 = this.classtype1
            this.saveSession.classtype2 = this.classtype2
            this.saveSession.classtype3 = this.classtype3
            this.saveSession.classtype4 = this.classtype4
            this.saveSession.videoplayer = this.videoplayer
            this.saveSession.fornum = this.fornum;
            sessionStorage.setItem(getToken(), JSON.stringify(this.saveSession))
          },
          //跳转实时 历史界面
          jumpcamera(index, n) {
            console.log("nnnnnnnnnn",n);
            if (n.url === '') {
              return
            }
            this.$router.push({
              path: "/largeScreen/dpCamera",
              query: {
                id: this.forping[index].id,
                label:n.label,
              },
            });
          },
          someWindowHandleChange(val) {
          },
          twofilterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
          },
          //树形过滤
          filterNode(value, data) {
            console.log(data.label.indexOf(value));
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
          },
          beforeLeaveTab() {
            return this.$confirm('此操作将清空当前列表, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              if (this.equipmentList === 'first') {
                this.forping.forEach(f => {
                  if (f.id) {
                    this.$refs.treeone.getNode(f.id).isCurrent = false
                  }
                })
              } else {
                this.allping.forEach((m, index) => {
                  this.$refs.treetwo.getNode(m.id).isCurrent = false;
                })
              }
              this.allping = [];
              this.fourPing = [],
                this.ninePing = [],
                this.shiliuPing = [],
                this.videoplayer.forEach((v, index) => {
                  this.stopVideo(v);
                });
              this.videoplayer = []
              this.forping = [
                {
                  url: "",
                },
                {
                  url: "",
                },
                {
                  url: "",
                },
                {
                  url: "",
                },
              ];
              clearInterval(this.singleTime);
            }).catch(() => {
              throw new Error("取消成功！");
            });
          },
          equipmentListHandleClick(tab, event) {
    
          },
          pollingListHandleClick(tab, event) {
            console.log(tab, event);
          },
          showselect(item1) {
            this.items = [];
            for (let i = 0; i < this.fornum; i++) {
              if (item1 == i) {
                this.items[i] = true;
              } else {
                this.items[i] = false;
              }
            }
          },
          //分屏
          selecttype(item, fnum, clo) {
            this.items = [];
            for (let i = 0; i < fnum; i++) {
              this.items[i] = false;
            }
            this.fornum = fnum;
            this.clonum = clo;
            if (item === "classtype1") {
              this.classtype1 = "primary";
              this.classtype2 = "";
              this.classtype3 = "";
              this.classtype4 = "";
            } else if (item === "classtype2") {
              this.classtype1 = "";
              this.classtype2 = "primary";
              this.classtype3 = "";
              this.classtype4 = "";
              this.tmpPing = [];
              this.forping.forEach((f) => {
                if (this.tmpPing.length < 4) {
                  this.tmpPing.push(f);
                }
                if (f.id) {
                  this.$refs.treeone.getNode(f.id).isCurrent = false
                }
              });
              this.forping = this.tmpPing;
              this.fourPing = [];
              this.ninePing = [];
              this.shiliuPing = [];
              this.tmpPing.forEach(t => {
                if (t.id) {
                  this.$refs.treeone.getNode(t.id).isCurrent = true
                  this.fourPing.push(t);
                  this.ninePing.push(t);
                  this.shiliuPing.push(t);
                }
              })
              this.winSome = 4;
            } else if (item === "classtype3") {
              this.classtype1 = "";
              this.classtype2 = "";
              this.classtype3 = "primary";
              this.classtype4 = "";
              if (this.forping.length < 9) {
                for (let i = 0; i < 9; i++) {
                  if (this.forping.length < 9) {
                    this.forping.push({url: ""});
                  }
                }
              } else {
                this.tmpPing = [];
                this.forping.forEach((f) => {
                  if (this.tmpPing.length < 9) {
                    this.tmpPing.push(f);
                  }
                  if (f.id) {
                    this.$refs.treeone.getNode(f.id).isCurrent = false
                  }
                });
                this.forping = this.tmpPing;
                this.ninePing = [];
                this.shiliuPing = [];
                this.tmpPing.forEach(t => {
                  this.$refs.treeone.getNode(t.id).isCurrent = true
                  this.ninePing.push(t);
                  this.shiliuPing.push(t);
                })
              }
              this.winSome = 9;
            } else if (item === "classtype4") {
              this.classtype1 = "";
              this.classtype2 = "";
              this.classtype3 = "";
              this.classtype4 = "primary";
              for (let i = 0; i < 16; i++) {
                if (this.forping.length < 16) {
                  this.forping.push({url: ""});
                }
              }
              this.forping.forEach((f) => {
                if (this.tmpPing.length < 9) {
                  this.tmpPing.push(f);
                }
              });
              this.winSome = 16;
            }
            this.saveSession.equipmentList = this.equipmentList
            this.saveSession.pollingList = this.pollingList
            this.saveSession.forping = this.forping
            this.saveSession.allping = this.allping
            this.saveSession.classtype1 = this.classtype1
            this.saveSession.classtype2 = this.classtype2
            this.saveSession.classtype3 = this.classtype3
            this.saveSession.classtype4 = this.classtype4
            this.saveSession.videoplayer = this.videoplayer
            this.saveSession.fornum = this.fornum;
            sessionStorage.setItem(getToken(), JSON.stringify(this.saveSession))
          },
          checkFull() {
            //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
            //火狐浏览器
            var isFull =
              document.mozFullScreen ||
              document.fullScreen ||
              //谷歌浏览器及Webkit内核浏览器
              document.webkitIsFullScreen ||
              document.webkitRequestFullScreen ||
              document.mozRequestFullScreen ||
              document.msFullscreenEnabled;
            if (isFull === undefined) {
              isFull = false;
            }
            return isFull;
          },
    
          // 全屏事件
          handleFullScreen() {
    
            if (this.classtype2 === "primary") {
              console.log('4分屏')
            } else if (this.classtype3 === "primary") {
              console.log('9分屏')
            } else {
              console.log('16分屏')
            }
    
            //let element = document.documentElement;
            let element = document.getElementById("shipin");
            let that = this;
            // alert(this.fullscreen)
            if (this.fullscreen) {
              if (document.exitFullscreen) {
                document.exitFullscreen();
              } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
              } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
              } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
              }
            } else {
              if (element.requestFullscreen) {
                element.requestFullscreen();
              } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
              } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
              } else if (element.msRequestFullscreen) {
                // IE11
                element.msRequestFullscreen();
              }
            }
            this.fullscreen = !this.fullscreen;
          },
          // 停止视频
          stopVideo(player, timer = 0) {
            try {
              player.unload();
              player.detachMediaElement();
              player.destroy();
              player = null;
              //clearInterval(timer);
              // timer = 0;
            } catch (err) {
              console.warn(err);
            }
          },
          // 播放视频
          playVideo(video) {
            let playPromise = video.play();
            if (playPromise !== undefined) {
              playPromise
                .then(() => {
                  video.play();
                })
                .catch(() => {
                });
            }
          },
          // 初始化视频
          initVideo(url) {
            // 判断是否支持flvjs
            if (flvjs.isSupported()) {
              // 获取video标签
              let video = this.$refs.videoElement;
              // 监听视频加载完后自动播放
              video.addEventListener("loadedmetadata", () => {
                this.playVideo(video);
              });
              // 配置参数
              let player = flvjs.createPlayer(
                {
                  // 视频格式 flv视频文件必须是type: "flv", mp4视频文件可以用type: "auto"
                  type: "auto",
                  // 是否直播
                  isLive: false,
                  // 视频链接
                  url: url,
                },
                {
                  // 启用分离的线程进行转换（暂时不稳定）
                  enableWorker: false,
                  // 启用IO隐藏缓冲区。如果您需要实时（最小延迟）来进行实时流播放，则设置为false，但是如果网络抖动，则可能会停顿。
                  enableStashBuffer: false,
                }
              );
              player.attachMediaElement(video);
              player.load();
    
              // 对以下事件进行监听
              // ERROR 播放期间由于任何原因发生错误
              player.on(flvjs.Events.ERROR, (error) => {
                console.warn("ERROR", error);
                player.destroy();
                this.initVideo(url);
              });
              // LOADING_COMPLETE 输入MediaDataSource已完全缓冲到结束
              player.on(flvjs.Events.LOADING_COMPLETE, (error) => {
                console.warn("LOADING_COMPLETE", error);
                player.destroy();
                this.initVideo(url);
              });
              return player;
            }
          },
          // 初始化直播
          initLiveBroadcast(url, index) {
            console.log(url, index);
            // 判断是否支持flvjs
            if (flvjs.isSupported()) {
              // 获取video标签
              //  console.log(this.$refs,'video')
              //  let video = this.$refs[index][0].liveBroadcastElement;
              var video = document.getElementById("v" + index);
              console.log(video, "video");
              // 监听视频加载完后自动播放
              this.playVideo(video);
              //video.addEventListener("loadedmetadata", this.playVideo(video));
              // 配置参数
              let player = flvjs.createPlayer(
                {
                  // 视频格式 flv视频文件必须是type: "flv", mp4视频文件可以用type: "auto"
                  type: "flv",
                  // 是否直播
                  isLive: true,
                  // 视频链接
                  url: url,
                  cors: true,
                  hasAudio: false,
                  withCredentials: false,
                  autoCleanupMaxBackwardDuration: 60,
                  autoCleanupMinBackwardDuration: 30,
                  statisticsInfoReportInterval: 1000,
                  stashInitialSize: 128 * 1024,
                  enableVideoFrozenMonitor: true,
                  enableDurationMonitor: true,
                  decreaseDurationStep: 1,
                  videoStateMonitorInterval: 1000,
                  lowLatencyThreshold: 1.5, // 延迟追赶判断阈值下限
                  highLatencyThreshold: 10,
                },
                {
                  isLive: true,
                  hasAudio: false,
                  fixAudioTimestampGap: true,
                  autoCleanupSourceBuffer: true,
                  enableStashBuffer: false,
                  enableDurationMonitor: true,
                  decreaseDurationStep: 1,
                }
              );
              player.attachMediaElement(video);
              player.load();
    
              // 对以下事件进行监听
              // ERROR 播放期间由于任何原因发生错误
              player.on(flvjs.Events.ERROR, (error) => {
                console.warn("ERROR", error);
                player.destroy();
                let data = this.forping[index];
                console.log(this.$refs.treeone.getNode(data.id))
                if (this.$refs.treeone.getNode(data.id).data.label.indexOf('异常') === -1) {
                  this.$refs.treeone.getNode(data.id).data.label = '(异常)' + this.$refs.treeone.getNode(data.id).data.label;
                }
                //this.initLiveBroadcast(url,index);
              });
              // LOADING_COMPLETE 输入MediaDataSource已完全缓冲到结束
              player.on(flvjs.Events.LOADING_COMPLETE, (error) => {
                console.warn("LOADING_COMPLETE", error);
                player.destroy();
                // this.initLiveBroadcast(url,index);
              });
              //
              // // 下面是自动追帧操作
              // let accThreshould = 0.6;
              // let normalThreshould = 0.4;
              // let accPlaybackRate = 1.1;
    
              // this.liveBroadcastTimer = setInterval(() => {
              //   if (!video.buffered.length) {
              //     return;
              //   }
              //   // 获取视频最新时间
              //   let end = video.buffered.end(0);
              //   // 计算时间差值
              //   let diff = end - video.currentTime;
              //   if (diff >= 3) {
              //     video.paused &&
              //     video.play().catch((err) => console.error("播放失败", err));
              //     video.currentTime = end;
              //   } else if (
              //     diff >= accThreshould &&
              //     video.playbackRate < accPlaybackRate
              //   ) {
              //     video.paused &&
              //     video.play().catch((err) => console.error("播放失败", err));
              //     video.playbackRate = accPlaybackRate;
              //   } else if (diff < normalThreshould && video.playbackRate > 1) {
              //     video.paused &&
              //     video.play().catch((err) => console.error("播放失败", err));
              //     video.playbackRate = 1;
              //   }
              // }, 3000);
              return player;
            }
          },
        },
      };
    </script>
    
    <style scoped lang="scss">
      .el-container {
        height: 100%;
        background: #333333;
        border: 1px solid #5d5c5c;
        margin: 0;
      }
    
      .el-tree {
        color: #ccc;
      }
    
      /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
        background-color: #777;
        color: #fab909;
      }
    
      /deep/ .el-tree-node__content:hover {
        background-color: #777;
      }
    
      /deep/ .el-tree-node__label {
        font-size: 0.19rem;
      }
    
      // .el
      // /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
      //   background-color: #999;
      //   color: #fff
      // }
      .container > > > .el-aside {
        width: 30%;
        height: 10.6rem;
        border-right: 1px solid #5d5c5c;
        overflow: auto;
      }
    
      .container > > > .el-aside::-webkit-scrollbar {
        display: none;
      }
    
      .container > > > .el-main {
        flex: 1;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
      }
    
      .container > > > .el-tabs__nav {
        width: 100%;
        border-radius: 0;
        border-top: 1px solid #5d5c5c;
        border-bottom: 1px solid #5d5c5c;
    
        border-left: none;
        border-right: none;
      }
    
      .container > > > .el-tabs__item {
        width: 50%;
        text-align: center;
        color: #8a8989;
        border-left: 1px solid #5d5c5c;
      }
    
      .container > > > .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        border-bottom: none;
        color: #fff;
      }
    
      .search {
        display: flex;
        width: 80%;
        margin: 0.125rem auto 0.2rem;
        border: 1px solid #5e5d5c;
      }
    
      .search > > > .el-input__inner {
        background: transparent;
        border-radius: 0;
        color: #8a8989;
        border: none;
      }
    
      .search > > > .el-button {
        border: none;
        border-radius: 0;
        text-align: center;
        font-size: 0.22rem;
        background: #999998;
        color: #494949;
      }
    
      .container > > > .el-tree {
        background: #333333;
        width: 100%;
        margin: 0 auto;
      }
    
      .conatiner > .el-collapse {
        border: none;
      }
    
      .conatiner > > > .el-collapse-item__wrap {
        border-bottom: none;
      }
    
      .container > > > .el-collapse-item__header {
        background: #333333;
        color: #fff;
        border: 1px solid #5e5d5c;
      }
    
      .container > > > .el-collapse-item__content {
        background: #333333;
      }
    
      .grid-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
      }
    
      .grid-content > > > .el-button {
        width: 25%;
        height: 0.6rem;
        border: none;
        color: #8a8989;
        background: #333333;
        border-radius: 0;
      }
    
      .grid-content > > > .el-button--primary {
        color: #ffffff;
        background: #444444;
      }
    
      .video-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        color: #fff;
      }
    
      .video-item {
        // width: 25%;
        // height: 100%;
        // margin-bottom: 0.12rem;
        // position: relative;
      }
    
      .itemWidth4 {
        width: 50%;
      }
    
      .itemWidth9 {
        width: 33.3%;
      }
    
      .itemWidth16 {
        width: 25%;
      }
    
      .videoWidth4 {
        object-fit: fill;
        width: 9.26rem;
        height: 5rem;
      }
    
      .videoWidth9 {
        object-fit: fill;
        width: 6.17rem;
        height: 3.333rem;
      }
    
      .videoWidth16 {
        object-fit: fill;
        width: 4.62rem;
        height: 2.5rem;
      }
    
      .scrrenVideowidth4 {
        object-fit: fill;
        width: 100%;
        height: 6.69rem;
      }
    
      .scrrenVideowidth9 {
        object-fit: fill;
        width: 100%;
        height: 4.46rem;
      }
    
      .scrrenVideowidth16 {
        object-fit: fill;
        width: 100%;
        height: 3.32rem;
      }
    
    
      .player-wrapper {
        // width: 100%;
        // height: 100%;
        position: relative;
      }
    
      .no-sigin-box {
        position: relative;
        border-left: 1px solid #5d5c5c;
        border-bottom: 1px solid #5d5c5c;
      }
    
      .no-border {
        border: none;
      }
    
      .no-sigin {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
      }
    
      .player-wrapper > > > .el-icon-close {
        position: absolute;
        right: 0.46rem;
        top: 0.1rem;
        font-size: 0.22rem;
        color: #fff;
        z-index: 9999;
      }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA2NDU0ODk_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/3c03d00f0e724095aa15a76cb637548a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA2NDU0ODk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/b5cbeed907da4f15bf8a29ac1ac03eb5.png