videojs宫格视频选择播放

项目需要四宫格播放视频，而且还要实现点击视频加入播放。

首先，肯定要实现再一个页面上显示多个视频源并播放视频：

html 复制代码

<template>
  <div>
    <div v-for="(item,index) in videoList" :key="index"  class="test_two_box">
      <video :id="'myVideo' + item.id" class="video-js">
        <source :src="item.src" type="video/mp4" />
      </video>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      videoList: [
        {
          id: 0,
          type: 'video/mp4',
          src: '/mp4/1.mp4',
          name:'视频1'
        },
        {
          id: 1,
          type: 'video/mp4',
          src: '/mp4/2.mp4',
          name:'视频2'
        },
        {
          id: 2,
          type: 'video/mp4',
          src: '/mp4/3.mp4',
          name:'视频3'
        },
        {
          id: 4,
          type: 'video/mp4',
          src: '/mp4/4.mp4',
          name:'视频5'
        }
      ]
    }
  },
  mounted() {
    this.videoList.map((item, index) => {
      let myPlayer = this.$video('myVideo' + item.id, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        poster: item.cover,
        //自动播放属性,muted:静音播放
        // autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "300px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "150px"
      });
    })
  }
}
</script>

这样就能显示四个视频，但是四个视频的格式是一列的格式，与我们的目标四宫格不符。

可以在前端展示部分做一个步长2的循环，让每一行都有两个视频：

html 复制代码

<template>
  <div>
    <div v-for="(item,index) in videoList" :key="index">
     <ul v-if="index % 2 == 0">
        <video :id="'myVideo' + videoList[index].id" class="video-js">
          <source :src="videoList[index].src" type="video/mp4" />
        </video>
        <video :id="'myVideo' + videoList[index + 1].id" class="video-js">
          <source :src="videoList[index + 1].src" type="video/mp4" />
        </video>
      </ul>
    </div>
  </div>
</template>


<script>
	......
</script>

这样就能实现一个页面四宫格播放四个视频。但是这样只能播放固定的写死的四个视频，怎么实现选择播放哪个呢？

首先，一定获取待播放的全部视频列表showallvideoList。之后可以按钮的方式，选择全部视频列表的某个视频，将其替换正在播放视频列表showvideoList中的某一个视频。至于替换哪一个，可以通过flag的形式标记最早播放的视频，替换后更新flag即可。

但是代码里，播放视频是通过循环建立myPlayer实现的，这种实现方法，只能修改最后一个建立的myPlayer。所以为此要建立四个不同的myPlayer

html 复制代码

<template>
	......
</template>
<script>
export default {
  data() {
    return {
      oddflag:true,
      showvideoList: [
        {
          id: 0,
          type: 'video/mp4',
          src: '/mp4/1.mp4',
          name:'视频1'
        },
        {
          id: 1,
          type: 'video/mp4',
          src: '/mp4/2.mp4',
          name:'视频2'
        },
        {
          id: 2,
          type: 'video/mp4',
          src: '/mp4/3.mp4',
          name:'视频3'
        },
        {
          id: 4,
          type: 'video/mp4',
          src: '/mp4/4.mp4',
          name:'视频4'
        }
      ]
      ,
      showallvideoList: [
        {
          id: 0,
          type: 'video/mp4',
          src: '/mp4/1.mp4',
          name:'视频1'
        },
        {
          id: 1,
          type: 'video/mp4',
          src: '/mp4/2.mp4',
          name:'视频2'
        },
        {
          id: 2,
          type: 'video/mp4',
          src: '/mp4/3.mp4',
          name:'视频3'
        },
        {
          id: 3,
          type: 'video/mp4',
          src: '/mp4/4.mp4',
          name:'视频4'
        },
        {
          id: 4,
          type: 'video/mp4',
          src: '/mp4/5.mp4',
          name:'视频5'
        },
        {
          id: 5,
          type: 'video/mp4',
          src: '/mp4/6.mp4',
          name:'视频6'
        }
      ]
    }
  },
  mounted() {

      this.showvideoList.map((item, index) => {
          if(index == 0){
            this.myPlayer0 = this.$video('myVideo' + item.id, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            // poster: item.cover,
            //自动播放属性,muted:静音播放
            // autoplay: "muted",
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "600px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "300px",
          })
        }
        if(index == 1){
            this.myPlayer1 = this.$video('myVideo' + item.id, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            // poster: item.cover,
            //自动播放属性,muted:静音播放
            // autoplay: "muted",
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "600px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "300px",
          })
        }
        if(index == 2){
            this.myPlayer2 = this.$video('myVideo' + item.id, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            // poster: item.cover,
            //自动播放属性,muted:静音播放
            // autoplay: "muted",
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "600px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "300px",
          })
        }
        if(index == 3){
            this.myPlayer3 = this.$video('myVideo' + item.id, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            // poster: item.cover,
            //自动播放属性,muted:静音播放
            // autoplay: "muted",
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "600px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "300px",
          })
        }
      })
  },
  methods:{
    show(item){
      console.log(item)
      if(this.oddflag){
        console.log(this.showvideoList[2])
        this.showvideoList[2] = item

      }
      else{
        console.log(this.showvideoList[3])
        this.showvideoList[3] = item
      }
      this.reshow(this.oddflag)
      this.oddflag = !this.oddflag
    },
    reshow(oddflag){
      console.log(this.showvideoList)
      if(oddflag){
        this.myPlayer2.src({src:this.showvideoList[2].src,type:this.showvideoList[2].type})
      }
      else{
        this.myPlayer3.src({src:this.showvideoList[3].src,type:this.showvideoList[3].type})
      }
      // console.log(this.showvideoList)
      // this.myPlayer.src({src:this.showvideoList[3].src,type:this.showvideoList[3].type})
    }
  }
}
</script>

（本示例实现最后两个视频的选择播放）

这样就可以实现宫格视频选择播放了