anKeYuan-largeScreen-9600/src/components/videoForMod/videoForMod.vue

<!-- 视频组件外科 -->
<template>
    <div class="videoForMod">
      <H5PlayerVideo v-if="videoData" :videoProps="videoData"></H5PlayerVideo>
      <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
    </div>
</template>
<script>
  import { iotCameraGetPreviewURLs } from '@/api/screen'
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
  export default {
    name: 'videoForMod',
    components: {
      H5PlayerVideo,
      fullH5PlayerVideo
    },
    props:{
      deviceNo:{},
    },
    data() {
      return {
        width:1396,
        height:806,
        videoData:null,
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
      }
    },
    created() {

    },
    mounted() {
      if(this.deviceNo){
        this.iotCameraGetPreviewURLs();
      }
    },
    methods: {
      iotCameraGetPreviewURLs(){
        let obj = {
          streamType:1,
          cameraIndexCode:this.deviceNo,
          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
        }
        iotCameraGetPreviewURLs(obj).then(response => {
          if(response.data){
            this.$set(this, 'videoData', {
              width: this.width,
              height: this.height,
              url: response.data,
            })
            this.$forceUpdate();
          }
        })
      },
      //全屏开启-关闭轮播
      stopTime(cameraIndexCode){
        this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
        this.$set(this,'fullVideoType',true);
      },
      //全屏关闭-开启轮播
      outFullScreen(){
        let self = this;
        this.$set(this,'fullVideoType',false);
        this.$set(this,'fullVideoProps',{});
      },
    }
  }
</script>
<style scoped lang="scss">
    .videoForMod {
      display: inline-block;
      width:1396px;
      height:806px;
      margin:20px 0 0 20px;
    }
</style>