index.vue 1.67 KB
<template>
  <div class="j-player-wrapper">
      <j-player ref="jplay"
        :type="playerType"
        :prefix-url="params.prefixUrl"

        :player-address="params.address"
        :channel-id="params.channelId"

        :datetime-range="params.datetimeRange"
      />
  </div>
</template>

<script>
import { getUrlParams } from './utils';
import JPlayer from '@/components/jPlayer';

/**
 * 此部分负责:
 * 1. iframe通信postmessage
 * 2. url获取参数window.location
 * 3. 对接小程序需求
 */
export default {
  name: 'JPlayerExtension',
  components: {
    JPlayer,
  },
  data() {
    return {
      playerType: 'live',

      params: {
        // channelId: '20000000001310000011',
        channelId: '',
        address: '52.130.155.147',
        prefixUrl: '',

        // 回放参数
        playerType: 'live',
        datetimeRange: [],
      },
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 通过URL获取相关参数
      const urlParamsMap = getUrlParams(window.location.hash);
      console.log('urlParamsMap', urlParamsMap);

      Object.keys(this.params).forEach(key => {
        if (urlParamsMap[key]) {
          this.params[key] = urlParamsMap[key];
        }
      });

      if (!this.params.address || !this.params.channelId) {
        console.error('传递URL参数有误,请确认 address 和 channelId 是否正确。');
      }
    },

    // 暴露方法
    screenshot() {
      return this.$refs.jplay.screenshot();
    },
    stopPlay() {
      return this.$refs.jplay.stopPlay();
    },
  },
}
</script>

<style lang="scss" scoped>
.j-player-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>