videojs宫格视频选择播放

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

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

<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>javascript">
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的循环，让每一行都有两个视频：

<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>javascript">......
</script>

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

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

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

<template>......
</template>
<script>javascript">
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>