vue 视频播放_flv 九宫格

vue 视频播放（flv格式）

需求：播放监控视频，并点击切换正在播放的视频，并可以切换成九宫格四宫格

<div class="div3">
          <!-- <div>
            <div class="four" @click="changeGrid(4)" style="cur">
              四宫格
            </div>
            <div class="four" @click="changeGrid(9)">九宫格</div>
          </div> -->
          <div
            :class="[
              'child',
              currentVideoNum == 4 ? 'div3-child' : 'div3-child2',
            ]"
          >
            <div
              :style="
                currentVideoNum == 4 ? { height: '390px' } : { height: '250px' }
              "
              v-for="(item, index) in videoData"
              :key="item.channelName + index"
              @click="changeVideo(item, index)"
            >
              <video
                :id="'video' + index"
                controls
                :autoplay="true"
                :muted="true"
                class="videoClass"
              ></video>
            </div>
          </div>
          <div style="height:40px;position:absolute;bottom:10px">
            <i
              class="el-icon-menu"
              @click="changeGrid(4)"
              style="font-size:40px"
            >
            </i>
            <i
              class="el-icon-s-grid"
              @click="changeGrid(9)"
              style="font-size:40px"
            ></i>
          </div>
      </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//videoData 播放的视频数组，默认值为空

 //切换导航条时注销正在播放的视频，不然会有属于谷歌浏览器会有的错误信息，导致视频无法播放
 beforeDestroy() {
    this.destroyVideo();
  },
1
2
3
4

   //四宫格/九宫格切换
    changeGrid(number) {
      this.destroyVideo();
      this.videoData = [];
      this.currentVideoNum = number;
      let data = this.list;
      this.end =
        data.length < this.currentVideoNum ? data.length : this.currentVideoNum;
      if (data && data.length) {
        this.ids = data.slice(0, this.end);
        this.getInitData("isChangeVideo");
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13

  //视频销毁
    destroyVideo(isChangeVideo) {
      if (isChangeVideo) {
      //点击方式切换销毁
        let flvPlayer = `${"flvPlayer" + this.videoIndex}`;
        if (this[flvPlayer] != null) {
          this[flvPlayer].destroy();
        }
      } else {
      //初始化时默认销毁
        for (let index = 0; index < this.currentVideoNum; index++) {
          let flvPlayer = `${"flvPlayer" + index}`;
          if (this[flvPlayer] != null) {
            this[flvPlayer].destroy();
          }
        }
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//将要替换的视频序号
changeVideo(item, index) {
  let videoElement = document.getElementById("video" + index);
 //选中的视频加红色框框
  videoElement.style.border = "red solid 1px";
  this.videoIndex = index;
},

getInitData(flag) {
  videoMenu().then((res) => {
    this.treeData = res.data || [];
    if (!flag) {
      this.initVideo(this.treeData);
      let online = this.list.filter((item) => item.status == 0);
      this.onLine = online.length;
    }
    //循环id，查找出对应的视频，并放到数组里
   //这边遇到过一个问题：由于异步操作，始终获取不到this.videoData中的值，		    setTimeout都试了都不可以，最后使用callback回调，播放视频
    this.ids.forEach((item) => {
      this.getVideoById(item.id, item.channel, "", () => {
        if (this.videoData.length == this.end) {
          this.videoData.forEach((item, index) => {
            this.$nextTick(() => {
              this.videoPlay(index, item);
            });
          });
        }
      });
    });
  });
},

//视频播放
videoPlay(index, item) {
  let videoElement = document.getElementById("video" + index);
   let flvPlayer = `${"flvPlayer" + index}`;
   this[flvPlayer] = flvjs.createPlayer({
     type: "flv",
    isLive: true,
    hasAudio: true,
     url: Url, // 视频播放的路径
  });
   this[flvPlayer].attachMediaElement(videoElement);
   this[flvPlayer].load();
   this[flvPlayer].play();

 //if (index == 0) {
    //this.flvPlayer0 = flvjs.createPlayer({
    //  type: "flv",
    //isLive: true,
    //hasAudio: true,
    // url: item.realPlayUrl,
   // });
   // this.flvPlayer0.attachMediaElement(videoElement);
  //this.flvPlayer0.load();
  //  this.flvPlayer0.play();
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

},

//初始化视频（需求：默认播放四个视频，通过递归筛选出有视频的id）
initVideo(treeData) {
  if (treeData && treeData.length) {
    for (let index = 0; index < treeData.length; index++) {
      if (
        treeData[index].tenantProjectVos &&
        treeData[index].tenantProjectVos.length
      ) {
        this.initVideo(treeData[index].tenantProjectVos);
      } else if (!treeData[index].tenantProjectVos) {
        this.list.push(treeData[index]);
        if (this.ids.length < this.currentVideoNum) {
          if (treeData[index].id) {
            this.ids.push(treeData[index]);
          }
        }
      }
    }
  }
},

//获取播放视频
getVideoById(id, channel, key, callback) {
  getVideo({ id, name}).then((res) => {
    const { data } = res || [];
    if (key == "currentKey") {
      this.videoData.splice(this.videoIndex, 1, data[0]);
      //解决总是最后一个视频播放不了，因为还没有渲染成功，所以取不到对应的div的id，故而无法播放视频
      this.$nextTick(() => {
        this.videoPlay(this.videoIndex, data[0]);
      });
    } else {
      if (this.videoData.length <= this.currentVideoNum) {
        this.videoData.push(data[0]);
      }
    }
    if (callback) {
      callback();
    }
  });
},

//获取当前行（这里试因为旁边会有一个树形的结构，通过点击树形结构获取id,根据id查询获取播放的视频，播放前销毁当前正在播放的视频）
getCurrentKey(row) {
  this.destroyVideo("isChangeVideo");
  if (!row.tenantProjectVos) {
    this.getVideoById(row.id, row.channel, "currentKey");
  }
  let videoElement = document.getElementById("video" + this.videoIndex);
  videoElement.style.border = "none";
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51