526互联

xgplayer的使用案例

发布时间 2023-06-03 23:55:00作者: Felix_Openmind

To myself: 引用的相关类库见个人文件上传列表 => xgplayer.zip

<template>
  <div class="video-player">
    <div class="title">
      <a-icon type="close" class="close" @click="closeVideo" />
    </div>
    <div class="iframe-box">
      <iframe id="xgIframe" scrolling="no" src="../../../static/xgplayer/player.html"></iframe>
    </div>
  </div>
</template>
<script>
import { getPreviewUrl } from '@/api/earlyWarningMap.js'

export default {
  props: {
    playCode: String,
  },
  data() {
    return {
      xgIframe: '',
      playUrl: ''
    }
  },
  watch: {
    playCode: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getQueryPreviewUrl()
        }
      },
    },
    playUrl: {
      immediate: true,
      handler(val) {
        if (val) {
          this.initIframe()
        }
      },
    }
  },
  mounted() {
    this.xgIframe = document.getElementById('xgIframe')
  },
  methods: {
    getQueryPreviewUrl() {
      getPreviewUrl({
        chanId: this.playCode,
        ipAddr: ''
      }).then(result => {
        if (result.status === 0) {
          if (result.data) {
            this.playUrl = result.data
          } else {
            this.$message.info('暂无视频')
          }
        }
      })
    },
    initIframe() {
      if (
        this.xgIframe &&
        this.xgIframe.contentWindow &&
        this.xgIframe.contentWindow.initPlugin
      ) {
        this.xgIframe.contentWindow.initPlugin(this.playUrl)
      } else {
        setTimeout(() => {
          this.initIframe()
        }, 1000)
      }
    },
    closeVideo() {
      this.$emit("closePlayerModal")
    }
  },
}
</script>
<style lang="scss">
.video-player {
  position: fixed;
  top: 50%;
  width: 680px;
  height: auto;
  z-index: 9999;
  left: 50%;
  transform: translate(-50%, -50%);

  .title {
    position: relative;
    height: 40px;
    background: linear-gradient(90deg,
        #0472cc 0%,
        rgba(25, 144, 238, 0.45) 51.61%,
        rgba(15, 114, 231, 0.3) 100%);

    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      font-size: 20px;
      color: white;
    }
  }

  .iframe-box {
    width: 100%;
    height: 460px;

    iframe {
      width: 100%;
      height: 100%;
    }
  }
}
</style>