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

		      :player-address="params.address"
		      :channel-id="params.channelId"
		      :datetime-range="datetimeRange"
		    />
		</div>
		<!-- 时间线组件 -->
		<div class="extension-time-box">
			<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" @ptzControlStop="ptzControlStop"/>
		</div>
	</div>

</template>

<script>
import { getUrlParams } from './utils';
import JPlayer from '@/components/jPlayer';
import videoTime from './videoTime';
import moment from "moment";
/**
 * 此部分负责:
 * 1. iframe通信postmessage
 * 2. url获取参数window.location
 * 3. 对接小程序需求
 */
export default {
  name: 'JPlayerExtension',
  components: {
    JPlayer,
		videoTime,
  },
  data() {
    return {
      playerType: 'live',
			datetimeRange: [],
      params: {
        // channelId: '20000000001310000011',
        channelId: '',
        address: '52.130.155.147',
        prefixUrl: '',
        watermark: '',

      },
    }
  },
  created() {
    this.init();
  },
  methods: {
		// 时间线改变
		videoTimeChange(val) {
			this.playerType = moment(val).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')?'live':'playback';
			if(this.playerType == 'playback'){
				this.datetimeRange = [new Date(moment(val).format("YYYY-MM-DD HH:mm:ss")).getTime(),new Date().getTime()]
			}
		},
		// 云台控制
		ptzControlClick(type) {
			console.log(type)
			// this.$refs.jplay.ptzController(type);
		},
		// 云台控制结束
		ptzControlStop() {
			// this.$refs.jplay.ptzController('stop');
		},


    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: 100vw;
  height: 56vw;
  overflow: hidden;
}
</style>