index.vue

<template>

  <div class="app-container" style="">
    <div style="height: 100%;">
      <el-col style="border:1px solid #cccccc;height: 100%;" :span="4">
        <el-tree :data="videoData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="20" style="height: 100%;">
        <div id="player"></div>
      </el-col>
    </div>
  </div>
</template>
<script>
import { getVideoTree } from "@/api/video/manager";
import { getPreviewURLs } from "@/api/video/artemis"
const IS_MOVE_DEVICE = document.body.clientWidth < 992 // 是否移动设备
const MSE_IS_SUPPORT = !!window.MediaSource // 是否支持mse
export default {
  name: "Video",
  components: {
  },
  data() {
    return {
      videoData: [],
      defaultProps: {
        children: 'childrenVideo',
        label: 'videoName'
      },
      queryParam: {
        cameraIndexCode: ""
      },
      player: null,
      videoOpenNum: -1,
      cameraIndexCode: ""
    }
  },
  created() {
    this.getVideoData();
  },
  methods: {
    getVideoData(){
      getVideoTree().then(response =>{
        this.videoData = response.data;
      })
    },
    handleNodeClick(data){
      if(this.cameraIndexCode == data.resourceId){
        return;
      }
      this.cameraIndexCode = data.resourceId;
      if(data.resourceId){
        this.queryParam.cameraIndexCode = data.resourceId;
        getPreviewURLs(this.queryParam).then(response =>{
            if(response.data.code == '0'){
                this.videoOpenNum++;
                let url = response.data.data.url;
                //let index = this.player.currentWindowIndex;
                this.player.JS_Play(url,{playURL: url, mode:"0" }, this.videoOpenNum%4).then(() => {
                  console.log('realplay success')
                },
                  e => { console.error(e) }
                )
            }
        });
      }
    },
    init() {
      // 设置播放容器的宽高并监听窗口大小变化
      window.addEventListener('resize', () => {
            this.player.JS_Resize()
      })
    },
    createPlayer() {
      this.player = new window.JSPlugin({
        szId: 'player',
        szBasePath: "/h5player",
        iMaxSplit: 4,
        iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
        openDebug: true,
        oStyle: {
          borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
        }
      })
    },
    loadScript(src){
      return new Promise(reslove =>{
        let scpritE1 = document.createElement("script");
          scpritE1.type = "text/javascript";
          scpritE1.src = src;
          scpritE1.onload = () => {
          reslove();
        }
      document.body.appendChild(scpritE1);
    })
    }

  },
  mounted() {
    //this.$el.style.setProperty('display', 'block')
    if(!window.JSPlugin){
      this.loadScript("/h5player/h5player.min.js").then(() =>{
        this.createPlayer();
        this.init()
      })

    }else{
      this.createPlayer();
      this.init()
    }

  }
};
</script>
<style scoped lang="scss">
  .app-container{
    position:absolute;
    top:0;
    bottom:0;
    width: 100%;
  }
  #player{
     width: 100% ;
     height: 100% ;
  }
</style>