anKeYuan-largeScreen-1080/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/index'
  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:470,
        height:290,
        videoData:null,
        //全屏视频参数
        fullVideoProps:{},
        fullVideoType:false,
      }
    },
    created() {

    },
    mounted() {
      if(this.deviceNo){
        this.iotCameraGetPreviewURLs();
      }
    },
    methods: {
      async iotCameraGetPreviewURLs() {
        try {
          let obj = {
            streamType:1,
            cameraIndexCode:this.deviceNo,
            protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
          }
          const response = await iotCameraGetPreviewURLs(obj);
          if(response.code == 200){
            this.$set(this, 'videoData', {
              width: this.width,
              height: this.height,
              url: response.data,
            })
            this.$forceUpdate();
          }
        } catch (error) {
          this.$message.error(error.message);
          // 不再向上抛出，错误被吞掉
        }
      },
      //全屏开启-关闭轮播
      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:470px;
      height:290px;
      margin:0 0 0 5px;
    }
</style>