index.vue

<template>
  <div class="video-page" :style="{height:isFullScreen?'100%':height?height:videoHeight+'px'}">
    <div class="video-box" :style="{height:isShowTime?'calc(100% - 128px)':'100%'}">
      <div v-if="playerNum == 1" class="video-split-one">
        <div v-if="videoObj.name" class="elRow">
          <div class="gateName">
            {{videoObj.name}}
          </div>
          <div class="closeIcon" @click="stopPlay">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <vion-player v-if="videoObj.playUrl" ref="vionPlayer" :playUrl="videoObj.playUrl" :watermarkText="videoObj.watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp"/>
        <div class="cameraTool" v-show="isShowJT">
          <p class="screenshot" @click="screenshot()"><i class="el-icon-camera"></i></p>
        </div>
      </div>
      <div v-else class="video-split-box">
        <div class="video-split-line">
          <div class="video-split-one" @click="selectVideoChange(0)">
            <div v-if="videoArrObj[0]&&videoArrObj[0].name" class="elRow">
              <div class="gateName">
                {{videoArrObj[0].name}}
              </div>
              <div class="closeIcon" @click="stopPlay(0)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <vion-player ref="vionPlayer0" v-if="videoArrObj[0]&&videoArrObj[0].playUrl" :playUrl="videoArrObj[0].playUrl" :watermarkText="videoArrObj[0].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp0"/>
            <div class="cameraTool" v-show="isShowJT&&videoArrObj[0]">
              <p class="screenshot" @click="screenshot(0)"><i class="el-icon-camera"></i></p>
            </div>
          </div>
          <div class="video-split-one" @click="selectVideoChange(1)">
            <div v-if="videoArrObj[1]&&videoArrObj[1].name" class="elRow">
              <div class="gateName">
                {{videoArrObj[1].name}}
              </div>
              <div class="closeIcon" @click="stopPlay(1)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <vion-player ref="vionPlayer1" v-if="videoArrObj[1]&&videoArrObj[1].playUrl" :playUrl="videoArrObj[1].playUrl" :watermarkText="videoArrObj[1].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp1"/>
            <div class="cameraTool" v-show="isShowJT&&videoArrObj[1]">
              <p class="screenshot" @click="screenshot(1)"><i class="el-icon-camera"></i></p>
            </div>
          </div>
        </div>
        <div class="video-split-line">
          <div class="video-split-one" @click="selectVideoChange(2)">
            <div v-if="videoArrObj[2]&&videoArrObj[2].name" class="elRow">
              <div class="gateName">
                {{videoArrObj[2].name}}
              </div>
              <div class="closeIcon" @click="stopPlay(2)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <vion-player ref="vionPlayer2" v-if="videoArrObj[2]&&videoArrObj[2].playUrl" :playUrl="videoArrObj[2].playUrl" :watermarkText="videoArrObj[2].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp2"/>
            <div class="cameraTool" v-show="isShowJT&&videoArrObj[2]">
              <p class="screenshot" @click="screenshot(2)"><i class="el-icon-camera"></i></p>
            </div>
          </div>
          <div class="video-split-one" @click="selectVideoChange(3)">
            <div v-if="videoArrObj[3]&&videoArrObj[3].name" class="elRow">
              <div class="gateName">
                {{videoArrObj[3].name}}
              </div>
              <div class="closeIcon" @click="stopPlay(3)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <vion-player ref="vionPlayer3" v-if="videoArrObj[3]&&videoArrObj[3].playUrl" :playUrl="videoArrObj[3].playUrl" :watermarkText="videoArrObj[3].watermarkText" :controlAutoHide="controlAutoHide" :showPtz="showPtz" @ptz-control="panTiltControlComp3"/>
            <div class="cameraTool" v-show="isShowJT&&videoArrObj[3]">
              <p class="screenshot" @click="screenshot(3)"><i class="el-icon-camera"></i></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="time-box" v-if="isShowTime">
      <videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @videoTimeSync="videoTimeSync" @allVideoFullScreen="allVideoFullScreen" @allVideoExitFullScreen="allVideoExitFullScreen" @splitScreenChange="splitScreenChange" :isShowSplit="isShowSplit"/>
    </div>
  </div>
</template>

<script>
import videoTime from './videoTime.vue'
import vionPlayer from '@/components/vionPlayer';
import moment from 'moment'
import tourApi from '@/api';
export default {
	name: 'VionPlayerWeb',
	components:{
		videoTime,
		vionPlayer,
	},
	data() {
		return {
			videoArrObj:[],
			isFullScreen:false,
			videoObj: {
				gateUnid: '',
				watermarkText: '',
				name:'',
			},
			videoPlayTime:'',
			videoBackEndTime:'',
			isNoBack:true,
			playerNum:1,
			splitNum:0,
			panTiltList:{
				up:0,
				down:1,
				left:2,
				right:3,
				leftUp:4,
				leftDown:5,
				rightUp:6,
				rightDown:7,
				zoomExpand:8,
				zoomNarrow:9,
				stop:-1
			},
		}
	},
	props:{
		// 是否显示时间操作区，默认为true
		isShowTime: {
			type: Boolean,
			default: true,
		},
		// 设置组件高度
		height:{
			type: String,
			default: '',
		},
		// 是否显示截图按钮，默认为false
		isShowJT: {
			type: Boolean,
			default: false,
		},
		// 是否支持四分屏，默认为true
		isShowSplit: {
			type: Boolean,
			default: true,
		},
		// 是否显示视频操作区，默认为true
		controlAutoHide: {
			type: Boolean,
			default: true,
		},
		// 是否显示视频操作区中的云台控制，默认为true
		showPtz: {
			type: Boolean,
			default: true,
		},
	},
	computed: {
			videoHeight() {
					const windowInnerHeight = window.innerHeight;
					return windowInnerHeight - 80;
			}
	},
	mounted() {
		window.playWebVideo = this.playWebVideo;
	},
	methods: {
		playWebVideo(obj) {
			if(obj.splitNum >=0) {
				this.splitNum = obj.splitNum
			}
			console.log(obj)
			if(this.$refs.videoTime) {
				this.$refs.videoTime.stopPlay()
			}
			obj.watermarkText = obj.watermarkText||'';
			if(this.playerNum == 4) {
				this.videoArrObj[this.splitNum] = Object.assign({}, obj)
				this.getVideoAddress(obj,this.splitNum)
			} else {
				this.videoObj = Object.assign({}, obj);
				this.getVideoAddress(obj)
			}
			this.$forceUpdate()
			if(this.isShowTime) {
				this.$refs.videoTime.startPlay()
			}
			this.splitNumChange()
		},
		// 获取视频播放地址
		getVideoAddress(obj,index) {
			let par = {
				gateUnid: obj.gateUnid,
			}
			if(!this.isNoBack){
				par.startTime = obj.startTime?obj.startTime:this.videoPlayTime;
				par.stopTime = obj.stopTime?obj.stopTime:this.videoBackEndTime;
			}
			tourApi.getLiveAndPlaybackAddress(par).then(res => {
				console.log(res)
				if (res.data&&res.data.code == 200) {
					if(this.playerNum == 4) {
						this.videoArrObj[index].playUrl = res.data.msg ? res.data.msg : '';
					} else {
						this.videoObj.playUrl = res.data.msg ? res.data.msg : '';
						console.log(this.videoObj)
						this.$forceUpdate()
						// this.$refs.vionPlayer.play(res.data.msg);
					}
				}
			})
		},
		// 分屏时选中屏数自动改变
		splitNumChange() {
			if(this.playerNum == 4) {
				for(let i=0;i<5;i++){
					if(!this.videoArrObj[i]){
						this.splitNum = i
						break;
					}
				}
				if(this.splitNum== 5) {
					this.splitNum = 0
				}
			}
		},
		allVideoExitFullScreen(){
			this.isFullScreen = false
		},
		allVideoFullScreen(val){
			this.isFullScreen = true
		},
		// 四分屏，单屏切换
		splitScreenChange(val) {
			if(val == 4) {
				if(this.$refs.vionPlayer) {
					this.$refs.vionPlayer.stopPlay();
				}
			} else {
				if(this.$refs.vionPlayer0) {
					this.$refs.vionPlayer0.stopPlay();
				}
				if(this.$refs.vionPlayer1) {
					this.$refs.vionPlayer1.stopPlay();
				}
				if(this.$refs.vionPlayer2) {
					this.$refs.vionPlayer2.stopPlay();
				}
				if(this.$refs.vionPlayer3) {
					this.$refs.vionPlayer3.stopPlay();
				}
			}
			this.$refs.videoTime.stopPlay()
			// console.log(val)
			this.playerNum = val
			this.videoArrObj = []
			this.splitNum = 0
		},
		// 分屏单个播放窗口点击
		selectVideoChange(val) {
			this.splitNum = val
		},
		// 时间线改变
		videoTimeChange(val) {
			this.isNoBack = val == moment().format('YYYY-MM-DD HH:mm:ss')
			if(!this.isNoBack){
				this.videoPlayTime = val
				this.videoBackEndTime = moment().format('YYYY-MM-DD HH:mm:ss')
			}
			// 更新视频地址
			if(this.playerNum == 4) {
				this.getVideoAddress(this.videoArrObj[0],0)
				this.getVideoAddress(this.videoArrObj[1],1)
				this.getVideoAddress(this.videoArrObj[2],2)
				this.getVideoAddress(this.videoArrObj[3],3)
			} else {
				this.getVideoAddress(this.videoObj)
			}
		},
		// 云台控制接口调用
		panTiltControl(val,gateUnid) {
			let par = {
				direction:this.panTiltList[val],
				speed:2,
				gateUnid:gateUnid
			}
			if(val == 'stop') {
				tourApi.ptzStop(par).then(res => {})
			} else {
				tourApi.ptzStart(par).then(res => {})
			}
		},
		panTiltControlComp(val){
			this.panTiltControl(val,this.videoObj.gateUnid)
		},
		panTiltControlComp0(val){
			this.panTiltControl(val,this.videoArrObj[0].gateUnid)
		},
		panTiltControlComp1(val){
			this.panTiltControl(val,this.videoArrObj[1].gateUnid)
		},
		panTiltControlComp2(val){
			this.panTiltControl(val,this.videoArrObj[2].gateUnid)
		},
		panTiltControlComp3(val){
			this.panTiltControl(val,this.videoArrObj[3].gateUnid)
		},
		// 播放时间与时间线同步
		videoTimeSync(val) {
			this.videoPlayTime = val
			this.videoBackEndTime = moment().format('YYYY-MM-DD HH:mm:ss')
		},

		
		
		// 暴露方法
		/**
		 * 截图
		 * num为分屏时的窗口序号，从0开始；不传则认为是单屏
		 */ 
		screenshot(num) {
			let imgInfo = ''
			if(num === 0) {
				imgInfo = this.$refs.vionPlayer0.screenshot()
			} else if(num === 1) {
				imgInfo = this.$refs.vionPlayer1.screenshot()
			} else if(num === 2) {
				imgInfo = this.$refs.vionPlayer2.screenshot()
			} else if(num === 3) {
				imgInfo = this.$refs.vionPlayer3.screenshot()
			} else {
				imgInfo = this.$refs.vionPlayer.screenshot()
			}
			return imgInfo;
		},
		/**
		 * 关闭视频播放
		 * num为分屏时的窗口序号，从0开始；不传则认为是单屏
		 */ 
		stopPlay(val) {
			if(val >=0) {
				if(val === 0) {
					this.$refs.vionPlayer0.stopPlay();
				} else if(val === 1) {
					this.$refs.vionPlayer1.stopPlay();
				} else if(val === 2) {
					this.$refs.vionPlayer2.stopPlay();
				} else if(val === 3) {
					this.$refs.vionPlayer3.stopPlay();
				}
				this.videoArrObj[val] = null
				this.splitNum = val
			} else {
				this.$refs.vionPlayer.stopPlay();
			}
			if(this.playerNum == 1||(this.playerNum == 4&&!this.videoArrObj[0]&&!this.videoArrObj[1]&&!this.videoArrObj[2]&&!this.videoArrObj[3])) {
				this.$refs.videoTime.stopPlay()
			}
		},
		
		
		
	}
}

</script>
<style scoped lang="less">
.video-page{
	background-color: rgba(0, 0, 0, 0.7);
	.video-box{
		width: 100%;
		position: relative;
		border-bottom: 1px solid #666666;
		.video-split-one{
			height: 100%;
			&:hover{
				.cameraTool{
						display: block;
				}
				.elRow{
						display: flex;
				}
			}
		}
		.cameraTool{
				position: absolute;
				right: 15px;
				top: 40%;
				display: none;
				z-index: 9999;
				color: #fff;
			.screenshot{
					width: 40px;
					height: 40px;
					background: rgba(0,0,0,.7);
					line-height: 40px;
					text-align: center;
					font-size: 25px;
					cursor: pointer;
					margin-bottom: 3px;
					border-radius: 5px;
			}
		}
		
		.elRow{
			width: calc(100% - 60px);
			position: absolute;
			top:0px;
			left:0px;
			z-index: 99;
			height: 48px;
			line-height: 48px;
			display: none;
			align-items: center;
			justify-content: space-between;
			background: rgba(0, 0, 0, 0.7);
			color: #fff;
			padding: 0 30px;
			font-size: 18px;
			.closeIcon{
				height: 48px;
				line-height: 48px;
				cursor: pointer;
				padding: 0 10px;
			}
		}
	}
	.time-box{
		width: 100%;
	}
	.video-split-box{
		width: 100%;
		height: 100%;
		.video-split-line{
			width: 100%;
			height: calc(50% - 2px);
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 4px;
		}
		.video-split-one{
			width: calc(50% - 2px);
			height: 100%;
			position: relative;
		}
	}
}
</style>