index.vue

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

<script>
import { getUrlParams } from './utils';
import vionPlayer from '../vionPlayer/index.vue';
import videoTime from './videoTime.vue';
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: '',
				ptzEnable:'',
				gateName:'',
				terminalType:'',
      },
      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:'',
			terminalType:'',
			dateFormatType:'YYYY-MM-DD',
			magnification:1,
    }
  },
  created() {
    // this.init();
  },
	mounted() {
	},
  methods: {
		// 播放倍率改变
		magnificationChange(val) {
			this.magnification = val
		},
		// 时间线改变
		videoTimeChange(val) {
			let valTime = moment(val).format('YYYY-MM-DD HH:mm:ss')
			let nowTime = moment().format('YYYY-MM-DD HH:mm:ss')
			if(valTime != nowTime){
				this.getVideoAddress(valTime,nowTime)
			} else {
				this.getVideoAddress()
			}
		},
		// 云台控制
		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||'云台当前操作失败');
					}
				})
			}
		},
		
		
    playWebVideo(obj) {
    	this.params = obj
			this.params.ptzEnable = ''+this.params.ptzEnable
			this.terminalType = this.params.terminalType
			this.dateFormatType = this.terminalType == 'ios'||this.terminalType == 'mac' ? 'YYYY/MM/DD':'YYYY-MM-DD';
    	if(this.params.gateUnid) {
    		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 scoped lang="less">
.j-player-wrapper {
  width: 100vw;
  height: 56vw;
  overflow: hidden;
}
</style>