index.vue

<template>
	<div class="extension-page">
		<div class="j-player-wrapper">
				<vion-player ref="vionPlayer" :watermarkText="params.watermarkText" :hideControls="true" :showPtz="false"/>
		</div>
		<!-- 时间线组件 -->
		<div class="extension-time-box">
			<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick"/>
		</div>
	</div>

</template>

<script>
import { getUrlParams } from './utils';
import vionPlayer from '@/components/vionPlayer';
import videoTime from './videoTime';
import moment from "moment";
import tourApi from '@/api';
import {
		Toast
	} from 'vant';
/**
 * 此部分负责：
 * 1. iframe通信postmessage
 * 2. url获取参数window.location
 * 3. 对接小程序需求
 */
export default {
  name: 'JPlayerExtension',
  components: {
    vionPlayer,
		videoTime,
  },
  data() {
    return {
      isNoBack: true,
			datetimeRange: [],
      params: {
        gateUnid: '',
        watermarkText: '',
      },
			panTiltList:{
				up:0,
				down:1,
				left:2,
				right:3,
				leftUp:4,
				leftDown:5,
				rightUp:6,
				rightDown:7,
				zoomExpand:8,
				zoomNarrow:9,
				focusNear:10,
				focusFar:11,
				stop:-1
			},
			nowPanTilt:'',
    }
  },
  created() {
    this.init();
  },
  mounted() {
		window.playWebVideo = this.playWebVideo;
    window.stopPlay = this.stopPlay;
    window.screenshot = this.screenshot;
	},
  methods: {
		// 时间线改变
		videoTimeChange(val) {
			let startTime = null
			let stopTime = null
			if(moment(val).format('YYYY-MM-DD HH:mm:ss') != moment().format('YYYY-MM-DD HH:mm:ss')){
				startTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
				stopTime = moment().format('YYYY-MM-DD HH:mm:ss')
			}
			this.getVideoAddress(startTime,stopTime)
		},
		// 云台控制
		ptzControlClick(type) {
			console.log(type)
			if(type != 'stop') {
				this.nowPanTilt = this.panTiltList[type]
			}
			let par = {
				direction:this.panTiltList[type],
				speed:2,
				gateUnid:this.params.gateUnid
			}
			if(type == 'stop') {
				par.direction = this.nowPanTilt
				tourApi.ptzStop(par).then(res => {
					console.log(res)
				})
			} else {
				tourApi.ptzStart(par).then(res => {
					console.log(res)
					if(res.data&&res.data.code != 200) {
						Toast.fail(res.data.msg||'云台当前操作失败');
					}
				})
			}
		},
		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];
		    }
		  });
			// this.params = obj
			if(this.params.gateUnid) {
				this.getVideoAddress()
			}
		},
    playWebVideo(obj) {
      // // 通过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];
      //   }
      // });
			this.params = obj
			this.getVideoAddress()
    },
		// 获取视频播放地址
		getVideoAddress(startTime,stopTime) {
			let par = {
				gateUnid: this.params.gateUnid,
				startTime:startTime?startTime:null,
				stopTime:stopTime?stopTime:null,
			}
			tourApi.getLiveAndPlaybackAddress(par).then(res => {
				console.log(res)
				if (res.data&&res.data.code == 200) {
					this.$refs.vionPlayer.play(res.data.msg);
				}
			})
		},

    // 暴露方法
		// 截图方法
    screenshot() {
      return this.$refs.vionPlayer.screenshot().then(data => {
      	return data;
      }).catch(err => {
      })
    },
		// 关闭视频播放
    stopPlay() {
      this.$refs.vionPlayer.destroy();
    },
  },
}
</script>

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