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"/>
				<!-- <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAJFBMVEVHcEzMzMzMzMzMzMzMzMzNzc3MzMzMzMzNzc3Nzc3MzMzMzMwv5ahDAAAAC3RSTlMAW+8S2UGVwyyZnOTRhEMAAAEfSURBVDjLzZKxbsJADIYdBQpsSCyVMlXAdEuQYGKpWFk6dWHJgsQ7sMDSpUv3PgITAQT0f7ly57ucQ45KXRAZot+/89k+X4ju9KzL4XOhlm3pR0enYrWViSRPXQIQSASkRSkIJEFRimYCuQAHSW89IOv6SH5TCsuAj68Ab1wDzqkAzqoC7AUAPtgsABgkBBgkCJiNHehGok//KRVsHqd+3Dj1/vukt3AH/Jj05s5/AmyZhFVWXDls44iVvfQWkCvgxU6g9ZdJfCLvjJbYaT3GvjOY4mQSG3SJGjhr/Y1Xohp+TGKqqzexZ/1GVGdNCitt6R8zVvb9d+JmKdl8o5sPWbtxT6zFuJcDQtk92MNmYiXHquYlZlVt1j4P6cd7fgHFW7Nhqu29TwAAAABJRU5ErkJggg==" alt="" @click="screenshot" class="screen-shot-img"> -->
		</div>
		<!-- 时间线组件 -->
		<div class="extension-time-box">
			<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" :dateFormatType="dateFormatType" :magnification="magnification" :ptzEnable="params.ptzEnable" :gateUnid="params.gateUnid" :appKey="params.appKey"/>
		</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';
var {CryptoJS} = require('./aes')
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: '',
				appKey:'',
				ptzEnable:'',
      },
			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() {
		window.playWebVideo = this.playWebVideo;
    window.stopPlay = this.stopPlay;
    window.screenshot = this.screenshot;
	},
  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,
				appKey:this.params.appKey,
			}
			// 加密
			let parStr = this.aesEncrypt(par)
			if(type == 'stop') {
				par.direction = this.nowPanTilt
				tourApi.ptzStop({param:parStr}).then(res => {
					console.log(res)
				})
			} else {
				tourApi.ptzStart({param:parStr}).then(res => {
					console.log(res)
					if(res.data&&res.data.code != 200) {
						Toast.fail('云台当前操作失败');
					}
				})
			}
		},
		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
			console.log(this.params)
			document.title = this.params.gateName||'视频详情'
			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()
			}
		},
    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,
				appKey: this.params.appKey,
				playbackSpeed: 1,
				startTime:startTime?startTime:null,
				stopTime:stopTime?stopTime:null,
			}
			// 加密
			let parStr = this.aesEncrypt(par)
			tourApi.getThroughVideoUrl({param:parStr}).then(res => {
				if (res.data&&res.data.code == 200) {
					this.$refs.vionPlayer.play(res.data.msg);
				}
			})
		},
		//加密
		aesEncrypt (obj){
			let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(JSON.stringify(obj)), CryptoJS.enc.Utf8.parse('0123456789abcdef'), {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}).toString();
			return encrypted
		},
    // 暴露方法
		// 截图方法
    screenshot() {
      this.$refs.vionPlayer.screenshot().then(data => {
				console.log(data)
				wx.miniProgram.postMessage({ data:{src:data} })
				// Toast.success('截图成功');
      }).catch(err => {
      })

    },
		// 关闭视频播放
    stopPlay() {
      this.$refs.vionPlayer.destroy();
    },
  },
}
</script>

<style lang="scss" scoped>
.j-player-wrapper {
  width: 100vw;
  height: 56vw;
  overflow: hidden;
	position: relative;
	z-index: 1;
}
.screen-shot-img{
	position: absolute;
	right:53px;
	bottom: 10px;
	width: 16px;
	height: 16px;
	z-index: 1000;
}
</style>