<template>
  <div class="app-container demo">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">测试页面</p>
      <p class="page-top-title-add-p" @click="demo2">测试</p>
    </div>
    <div class="scrollbar-box" v-if="pageType">
      <xgPlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"
                     :style="'display: inline-block;width:'+item.width+'px;height:'+item.height+'px;'"></xgPlayerVideo>
      <!--<mpegts-video :style="'display: inline-block;width:'+item.width+'px;height:'+item.height+'px;'" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>-->
    </div>
  </div>
</template>
<script>
  import { jobAdminLogin } from "@/api/commonality/homologouspermission";
  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
  import xgPlayerVideo from '@/components/xgPlayerVideo/xgPlayerVideo.vue'
  export default {
    name: 'demo',
    components: {
      mpegtsVideo,
      xgPlayerVideo
    },
    data () {
      return {
        pageType:true,
        videoList:[
          {
            width:600,    //(宽度:非必传-默认600)
            height:338,   //(高度:非必传-默认338)
            url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
          },
          {
            width:600,    //(宽度:非必传-默认600)
            height:338,   //(高度:非必传-默认338)
            url: 'http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064/hls.m3u8',
          }
        ],
      }
    },
    created(){

    },
    mounted(){
      // this.demo();
    },
    methods:{
      demo2(){
        this.$set(this,'pageType',!this.pageType);
      },
      demo(){
        let list = [];
        for(let i=1;i<2;i++){
          list.push(
            {
              width:600,    //(宽度:非必传-默认600)
              height:338,   //(高度:非必传-默认338)
              url: 'http://192.168.1.88:8230/rtp/440102004920000000010064_34020000001320000064/hls.m3u8',
              // url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8',
            }
          )
        }
        this.$set(this,'videoList',list);
      },
    },
  }
</script>
<style scoped lang="scss">
  .demo{

  }
</style>
