(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-0569424e"],{"2c31":function(e,t,n){},"3cbc":function(e,t,n){"use strict";n.r(t);var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"app-container"},[n("el-select",{staticClass:"grid-select",model:{value:e.currentGrid,callback:function(t){e.currentGrid=t},expression:"currentGrid"}},e._l([1,4,6,9,16],(function(e){return n("el-option",{key:e,attrs:{label:e+"宫格",value:e}})})),1),n("div",{staticClass:"video-container",style:e.gridStyle},e._l(e.currentVideos,(function(e){return n("div",{key:e.id,staticClass:"video-wrapper"},[n("video",{ref:"videoPlayers",refInFor:!0,staticClass:"video-element",attrs:{controls:"",src:e.url,muted:"",playsinline:""},domProps:{muted:!0}})])})),0),e.totalPages>1?n("div",{staticClass:"pagination"},[n("el-button",{attrs:{disabled:1===e.currentPage},on:{click:e.prevPage}},[n("i",{staticClass:"el-icon-arrow-left"})]),n("span",{staticClass:"page-text"},[e._v(e._s(e.currentPage)+"/"+e._s(e.totalPages))]),n("el-button",{attrs:{disabled:e.currentPage===e.totalPages},on:{click:e.nextPage}},[n("i",{staticClass:"el-icon-arrow-right"})])],1):e._e()],1)},a=[],c=n("c7eb"),s=n("1da1"),i=(n("99af"),n("d81d"),n("fb6a"),n("b0c0"),n("d3b7"),n("3ca3"),n("0643"),n("a573"),n("ddb0"),{data:function(){return{currentGrid:4,currentPage:1,videoList:[{id:1,url:"http://vjs.zencdn.net/v/oceans.mp4",name:"aaa"},{id:2,url:"http://vjs.zencdn.net/v/oceans.mp4",name:"bbb"},{id:3,url:"http://vjs.zencdn.net/v/oceans.mp4",name:"ccc"},{id:4,url:"http://vjs.zencdn.net/v/oceans.mp4",name:"ddd"},{id:5,url:"http://vjs.zencdn.net/v/oceans.mp4",name:"eee"},{id:6,url:"http://vjs.zencdn.net/v/oceans.mp4",name:"fff"},{id:7,url:"http://vjs.zencdn.net/v/oceans.mp4",name:"ggg"}],gridLayoutMap:{1:{cols:1,rows:1},4:{cols:2,rows:2},6:{cols:3,rows:2},9:{cols:3,rows:3},16:{cols:4,rows:4}}}},computed:{gridStyle:function(){var e=this.gridLayoutMap[this.currentGrid],t=e.cols,n=e.rows;return{gridTemplateColumns:"repeat(".concat(t,", 1fr)"),gridTemplateRows:"repeat(".concat(n,", 1fr)"),aspectRatio:"".concat(t,"/").concat(n)}},currentVideos:function(){var e=(this.currentPage-1)*this.currentGrid;return this.videoList.slice(e,e+this.currentGrid)},totalPages:function(){return Math.ceil(this.videoList.length/this.currentGrid)}},watch:{currentGrid:function(){this.currentPage=1,this.$nextTick(this.playCurrentPage)},currentPage:function(){this.$nextTick(this.playCurrentPage)}},methods:{playCurrentPage:function(){var e=this;return Object(s["a"])(Object(c["a"])().mark((function t(){var n,r;return Object(c["a"])().wrap((function(t){while(1)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,e.pauseAllVideos();case 3:return t.next=5,e.$nextTick();case 5:return n=(e.$refs.videoPlayers||[]).slice(0,e.currentVideos.length),r=n.map((function(e){return e.muted=!0,e.play().catch((function(e){"AbortError"!==e.name&&console.warn("视频播放失败:",e)}))})),t.next=9,Promise.all(r);case 9:t.next=14;break;case 11:t.prev=11,t.t0=t["catch"](0),console.error("页面播放异常:",t.t0);case 14:case"end":return t.stop()}}),t,null,[[0,11]])})))()},pauseAllVideos:function(){var e=this;return Object(s["a"])(Object(c["a"])().mark((function t(){var n,r;return Object(c["a"])().wrap((function(t){while(1)switch(t.prev=t.next){case 0:return n=e.$refs.videoPlayers||[],r=n.map((function(e){return new Promise((function(t){e.paused?t():(e.addEventListener("pause",t,{once:!0}),e.pause())}))})),t.next=4,Promise.all(r);case 4:case"end":return t.stop()}}),t)})))()},prevPage:function(){this.currentPage>1&&this.currentPage--},nextPage:function(){this.currentPage<this.totalPages&&this.currentPage++}},mounted:function(){this.playCurrentPage()}}),o=i,u=(n("70cc"),n("2877")),l=Object(u["a"])(o,r,a,!1,null,"73196424",null);t["default"]=l.exports},"70cc":function(e,t,n){"use strict";n("2c31")}}]);