index.vue

<template>
  <div class="video-page" :style="{height:isFullScreen?'100%':allVideoHeight?allVideoHeight: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="isShowTitle&&videoObj.channelId" class="elRow">
          <div class="gateName">
            {{videoObj.name||''}}
          </div>
          <div class="closeIcon" @click="stopPlay">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <j-player v-if="videoObj.channelId" ref="jPlayer" :type="jPlayerType" :channel-id="videoObj.channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoObj.prefixUrl" :player-address="videoObj.address" :watermark="params.watermark"/>
        <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="isShowTitle&&videoArrObj[0]&&videoArrObj[0].channelId" class="elRow">
              <div class="gateName">
                {{videoArrObj[0].name||''}}
              </div>
              <div class="closeIcon" @click="stopPlay(0)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <j-player ref="jPlayer0" v-if="videoArrObj[0]" :type="jPlayerType" :channel-id="videoArrObj[0].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[0].prefixUrl" :player-address="videoArrObj[0].address" :watermark="videoArrObj[0].watermark"/>
            <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="isShowTitle&&videoArrObj[1]&&videoArrObj[1].channelId" class="elRow">
              <div class="gateName">
                {{videoArrObj[1].name||''}}
              </div>
              <div class="closeIcon" @click="stopPlay(1)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <j-player ref="jPlayer1" v-if="videoArrObj[1]" :type="jPlayerType" :channel-id="videoArrObj[1].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[1].prefixUrl" :player-address="videoArrObj[1].address" :watermark="videoArrObj[1].watermark"/>
            <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="isShowTitle&&videoArrObj[2]&&videoArrObj[2].channelId" class="elRow">
              <div class="gateName">
                {{videoArrObj[2].name||''}}
              </div>
              <div class="closeIcon" @click="stopPlay(2)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <j-player ref="jPlayer2" v-if="videoArrObj[2]" :type="jPlayerType" :channel-id="videoArrObj[2].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[2].prefixUrl" :player-address="videoArrObj[2].address" :watermark="videoArrObj[2].watermark"/>
            <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="isShowTitle&&videoArrObj[3]&&videoArrObj[3].channelId" class="elRow">
              <div class="gateName">
                {{videoArrObj[3].name||''}}
              </div>
              <div class="closeIcon" @click="stopPlay(3)">
                <i class="el-icon-close"></i>
              </div>
            </div>
            <j-player ref="jPlayer3" v-if="videoArrObj[3]" :type="jPlayerType" :channel-id="videoArrObj[3].channelId" :datetime-range="jPlayerTimeRange" :prefix-url="videoArrObj[3].prefixUrl" :player-address="videoArrObj[3].address" :watermark="videoArrObj[3].watermark"/>
            <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 jPlayer from '@/components/jPlayer';
import moment from 'moment'
export default {
	name: 'JPlayerWeb',
	components:{
		videoTime,
		jPlayer,
	},
	data() {
		return {
			videoArrObj:[],
			isFullScreen:false,
			jPlayerType:'live',
			videoObj: {
				channelId: '',
				address: '52.130.155.147',
				prefixUrl: '',
				watermark: '',
			},
			jPlayerTimeRange:[],
			playerNum:1,
			splitNum:0,
			
			videoPlayTime:'',
		}
	},
	props:{
		// 是否显示时间操作区，默认为true
		isShowTime: {
			type: Boolean,
			default: true,
		},
		// 设置组件高度
		allVideoHeight:{
			type: String,
			default: '',
		},
		// 是否显示截图按钮，默认为false
		isShowJT: {
			type: Boolean,
			default: false,
		},
		// 是否显示头部标题栏，默认为false
		isShowTitle: {
			type: Boolean,
			default: false,
		},
		// 是否支持四分屏，默认为true
		isShowSplit: {
			type: Boolean,
			default: true,
		},
	},
	computed: {
			videoHeight() {
					const windowInnerHeight = window.innerHeight;
					return windowInnerHeight - 80;
			}
	},
	mounted() {
		window.playWebVideo = this.playWebVideo;
	},
	methods: {
		playWebVideo(obj) {
			if (!obj.address || !obj.channelId) {
				console.error('传递URL参数有误，请确认 address 和 channelId 是否正确。');
				return false
			}
			if(obj.splitNum >=0) {
				this.splitNum = obj.splitNum
			}
			console.log(obj)
			if(this.$refs.videoTime) {
				this.$refs.videoTime.stopPlay()
			}
			this.jPlayerTimeRange = [];
			this.jPlayerType = 'live';
			obj.prefixUrl = obj.prefixUrl||'';
			obj.watermark = obj.watermark||'';
			if(this.playerNum == 4) {
				this.videoArrObj[this.splitNum] = Object.assign({}, obj)
			} else {
				this.videoObj = Object.assign({}, obj);
			}
			console.log(this.videoObj)
			this.$forceUpdate()
			if(this.isShowTime) {
				this.$refs.videoTime.startPlay()
			}
			this.splitNumChange()
		},
		// 分屏时选中屏数自动改变
		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
			 this.$emit('exitFullScreen')
		},
		allVideoFullScreen(val){
			this.isFullScreen = true
			this.$emit('fullScreen')
		},
		// 四分屏，单屏切换
		splitScreenChange(val) {
			if(val == 4) {
				if(this.$refs.jPlayer) {
					this.$refs.jPlayer.stopPlay();
				}
			} else {
				if(this.$refs.jPlayer0) {
					this.$refs.jPlayer0.stopPlay();
				}
				if(this.$refs.jPlayer1) {
					this.$refs.jPlayer1.stopPlay();
				}
				if(this.$refs.jPlayer2) {
					this.$refs.jPlayer2.stopPlay();
				}
				if(this.$refs.jPlayer3) {
					this.$refs.jPlayer3.stopPlay();
				}
			}
			this.$refs.videoTime.stopPlay()
			// console.log(val)
			this.playerNum = val
			this.videoArrObj = []
			this.splitNum = 0
		},
		// 分屏单个播放窗口点击
		selectVideoChange(val) {
			this.splitNum = val
		},
		// 时间线改变
		videoTimeChange(val) {
			this.videoPlayTime = val
			let isNoBack = moment(this.videoPlayTime).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')
			this.jPlayerType = isNoBack?'live':'playback'
			if(!isNoBack){
				let startTime = new Date(moment(this.videoPlayTime).format("YYYY-MM-DD HH:mm:ss")).getTime()
				let endTime = new Date().getTime()
				this.jPlayerTimeRange = [startTime,endTime]
			}
		},
		videoTimeSync(val) {
			this.videoPlayTime = val
		},
		
		
		// 暴露方法
		/**
		 * 截图
		 * num为分屏时的窗口序号，从0开始；不传则认为是单屏
		 */ 
		screenshot(num) {
			let imgInfo = ''
			if(num === 0) {
				imgInfo = this.$refs.jPlayer0.screenshot()
			} else if(num === 1) {
				imgInfo = this.$refs.jPlayer1.screenshot()
			} else if(num === 2) {
				imgInfo = this.$refs.jPlayer2.screenshot()
			} else if(num === 3) {
				imgInfo = this.$refs.jPlayer3.screenshot()
			} else {
				imgInfo = this.$refs.jPlayer.screenshot()
			}
			return imgInfo;
		},
		/**
		 * 关闭视频播放
		 * num为分屏时的窗口序号，从0开始；不传则认为是单屏
		 */ 
		stopPlay(val) {
			if(val >=0) {
				if(val === 0) {
					this.$refs.jPlayer0.stopPlay();
				} else if(val === 1) {
					this.$refs.jPlayer1.stopPlay();
				} else if(val === 2) {
					this.$refs.jPlayer2.stopPlay();
				} else if(val === 3) {
					this.$refs.jPlayer3.stopPlay();
				}
				this.videoArrObj[val] = null
				this.splitNum = val
			} else {
				this.$refs.jPlayer.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>