当前代码适用于加载MP4和flv格式的视频流

先看下完整的功能图

功能讲解

• 1.四宫格与一屏的切换（现在浏览器最多只支持6屏，我测试了下四屏的话差不多就是极限了最好不要再超过了）
• 2.实现video多屏同时播放
• 3.实现翻页功能

屏幕的宫格如何实现（四宫格）

我使用了两个div嵌套 外层的div控制纵向的个数内层的div控制横向的个数 如下图

黄色的为纵向div 粉红的为横向div可以结合代码看

那么一屏和四屏是如何切换的呢

  data() {
    return {
      howmany: 1, // 1 为1屏 //2 为四屏 // 3为9屏（浏览器最多支持6屏所以这里删除了）
    };
  },

      <div v-for="i in howmany" :key="i" class="horizontal">
        <div v-for="j in howmany" :key="j" class="vertical">
           这里面放video标签
        </div>
      </div>

.horizontal {
  display: flex;
  flex: 1;
  flex-direction: row;
  margin-bottom: 1px;
}
.vertical {
  display: flex;
  flex: 1;
  margin-right: 1px;
}

切换的话只需要改变howmany 这个字段的值就行了，拷过去就可以使用。

开发到这里如果你没接触过video你会大概率遇到以下问题↓

1.video如何充满父容器？

上篇文章已经提到过了这里不做过多讲解不知道的点这里

2.为什么我的video只能展示一屏？

这是一个特别基础但又特别让人忽略的问题。大方的说我当时就没注意到那个点导致一晚上没想通。等一觉醒来时才发现真特么蠢。

• 1.如果你用到了flv去加载视频那么你就需要使用到id或者class 去获取这个element
• 2.你很可能只用了一个id 或者相同的class导致不管加载多少屏都只能加载第一屏。

解决多屏只加载一个视频的方法

需要给多个video赋予不同的id值。

3.为什么翻页的时候会报错各种错误层出不穷。下面是折磨了我一天的精华

• 1.一屏切换到4屏 或者 4屏切换的1屏 时第一个视频始终不改变

这个是因为浏览器的缓存导致的解决方法也简单

    // 加个耗时操作就阔以啦。
    fourScreen() {
      this.restScreen();
      setTimeout(() => {
        this.howmany = 2;
      }, 50);
    },
    restScreen() {
      this.pages = 0;
      this.howmany = 0;
    },

• 2.切换页面时画面没有变化。

1.如果切换的视频流相同那么没变化是正常的
2.如果视频流不同那么是因为你没有在自定义的video标签中处理二次监听。操作做法如下

  watch: {
    sources: {
      deep: true,
      // immediate: true,// 千万不要加这一行代码加里就完蛋
      handler(newSources, oldSources) {
        var videoElement = document.getElementById(this.id);
        if (!videoElement) {
          if (this.player !== null) {
            // attachMediaElement(mediaElement: HTMLMediaElement): void;
            this.player.pause();
            this.player.unload();
            this.player.detachMediaElement();
          }
        }
        if (!this.loading) {
          this.loading = true;
        }
        if (flv.isSupported()) {
          this.player = flv.createPlayer({
            type: "mp4/flv",
            url: newSources
            // url: this.sources
          });
        }
        var videoElement = document.getElementById(this.id);
        this.player.attachMediaElement(videoElement);
        this.player.load();
      }
    }
  },

• 3.当你切换视频到最后一页，而恰好后几个容器没有视频流加载然后你切回来这时啪GG思密达？

这时你会发现一堆的bug想摔了电脑的心都有了
1.那是因为你没有做好占位符工作。（当video的url为空时一定不要加载video否则那错误想跑火车一样一路报红）

好啦上代码吧很简单 很多细节在代码的注释里面一定要看注释
https://gitee.com/wukong2/video-flv