zhgdyunapp/pages/videoManage/playVideo.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true">
			<view class="headerName">
				视频播放
			</view>
		</headers>
		<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="url" controls autoplay></video> -->
		<!-- 外网IP地址访问视频监控 -->
		<video class="videoBox" id="myVideo" :custom-cache="false" :src="playUrlFilter" controls autoplay></video>
		<view class="videoName">
			{{videoInfo.videoName}}
			<button v-if="videoInfo.videoType==3" type="primary" class="changeBtn btn" @click="changeStreamFn">{{streamType==1?'切换到主码流':'切换到子码流'}}</button>
		</view>
		<view class="videoOperateBox">
			<view class="box">
				<image src="../../static/videoControlIcon/bg.png" class="bg"></image>
				<view class="pic top" @click="controlVideoFn(0,0.2,0,'UP')"></view>
				<view class="pic left" @click="controlVideoFn(-0.2,0,0,'LEFT')"></view>
				<view class="pic bottom" @click="controlVideoFn(0,-0.2,0,'DOWN')"></view>
				<view class="pic right" @click="controlVideoFn(0.2,0,0,'RIGHT')"></view>
				<!-- <view class="pic center" @click="stop()"></view> -->
			</view>
			<view class="box2">
				<view class="zoom zoomin" @click="controlVideoFn(0,0,0.2,'ZOOM_IN')"></view>
				<view class="zoom zoomout" @click="controlVideoFn(0,0,-0.2,'ZOOM_OUT')"></view>
			</view>
		</view>
		<view class="video-playback" @click="toBackList">
			视频回放
		</view>
	</view>
</template>

<script>
	import headers from '../../components/headers/headers.vue'
	export default {
		components:{headers},
		data() {
			return {
				url:'',//rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
				videoInfo:{videoName:'',videoType:null},
				streamType: 1, //1是子码流    2是主码流
				videoResponseInfo: {}
			};
		},
		onLoad(options) {
			//videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
			// this.url = options.url
			this.videoInfo=uni.getStorageSync('videoInfo')
			if(this.videoInfo.videoType==2){
				this.url= this.videoInfo.liveRadioUrl
			}else{
				this.getPlayUrl()
			}
		},
		computed: {
			playUrlFilter(){
				return this.url?'rtsp://42.180.188.17'+this.url.substring(20):""
			}
		},
		methods:{
			// 跳转到录像回放列表
			toBackList(){
				uni.navigateTo({
					url: './playBackList?obj=' + JSON.stringify({...this.videoResponseInfo,...this.videoInfo})
				})
			},
			changeStreamFn(){
				if(this.streamType==1){
					this.streamType=2
				}else{
					this.streamType=1
				}
				this.getPlayUrl()
			},
			getPlayUrl(){
				var that = this
				var json ={itemId:this.videoInfo.itemId}
				if(this.videoInfo.videoType==3){
					json.streamType=this.streamType
					json.type='rtsp'  //rtsp或者hls
				}
				this.sendRequest({
					url: "xmgl/videoItem/getVideoItemInfo",
					data: json,
					method: "post",
					success(res){
						switch (that.videoInfo.videoType){
							case 1:
								that.url=res.result.videoInfo.hdFlvAddress
								break;
							default:
								that.url=res.result.videoInfo.url
								break;
						}
						that.videoResponseInfo = {...res.result.projectVideoConfig,...res.result.videoInfo};
						for(let i in that.videoResponseInfo){
							if(!that.videoResponseInfo[i]){
								delete that.videoResponseInfo[i]
							}
						}
					}
				})
			},
			controlVideoFn(pan, tilt, zoom,opType){
				if(this.videoInfo.deviceType!=2){
					uni.showToast({
						title:'该设备不是球机，不支持此操作',
						icon:'none'
					})
					return false
				}
				switch (this.videoInfo.videoType){
					case 3:
						this.controlVideoFn_isc(opType)
						break;
					case 4:
						this.controlVideoFn_dh(pan, tilt, zoom)
						break;
					default:
						uni.showToast({
							title:'暂不支持',
							icon:'none'
						})
						break;
				}
			},
			controlVideoFn_isc(opType){
				let json = {
					// cameraId: this.videoInfo.deviceSerial,
					itemId:this.videoInfo.itemId,
					opType: opType,
					opSize: 20,
					opCode: 1
				};
				var that = this
				this.sendRequest({
					url: "xmgl/videoItem/getHikPtzControl",
					data: json,
					method: "post",
					success(res){
						uni.showToast({
							title:'控制成功',
							icon:'none'
						})
					}
				})
			},
			controlVideoFn_dh(pan, tilt, zoom){
				var code = '';
				var jsonStr = {
					pan: pan,
					tilt: tilt,
					zoom: zoom,
					duration: 100
				};
				let json = {
					ip: this.videoInfo.ip,
					port: this.videoInfo.port,
					username: this.videoInfo.username,
					password: this.videoInfo.password,
					chnnelcode: this.videoInfo.chnnelcode,
					jsonStr: JSON.stringify(jsonStr),
					data: new Date()
				};
				var that = this
				this.sendRequest({
					url: "xmgl/video/putPTZ",
					data: json,
					method: "get",
					success(res){
						uni.showToast({
							title:'控制成功',
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
/* #ifdef H5 */
.fullHeight{
	background-color: #F4F5FD;
	height: 100vh;
}
/* #endif */
 
/* #ifdef MP-WEIXIN */
.fullHeight{
	background-color: #F4F5FD;
	height: 100vh;
}
/* #endif */
 
/* #ifdef APP-PLUS */
.fullHeight{
	background-color: #F4F5FD;
	height: auto;
	padding-bottom: 60rpx;
}
/* #endif */
.videoBox{
	width: 100%;
}
.videoName{
	font-size: 16px;
	color: $uni-text-color;
	font-weight: bold;
	margin: 10px 15px;
	position: relative;
	.changeBtn{
		position: absolute;
		right: 0;
		top: 0;
		font-size: 12px;
	}
}
.video-playback{
	width: 454rpx;
	height: 108rpx;
	background: #FFFFFF;
	border-radius: 31rpx;
	text-align: center;
	line-height: 108rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 400;
	font-size: 40rpx;
	color: #8D8D8D;
	margin: 0 auto;
	margin-top: 80rpx;
	// position: fixed;
	// bottom: 80rpx;
	// left: 145rpx;
}
.videoOperateBox {
  text-align: center;
  padding-top: 10px;
  .bg{
	  width: 220px;
	  height: 220px;
  }
}

.videoOperateBox .box {
  position: relative;
  display: inline-block;
  margin: auto;
  height: 220px;
}

.videoOperateBox .pic {
  position: absolute;
  cursor: pointer;
}

.videoOperateBox .zoom {
  width: 106px;
  height: 69px;
  display: inline-block;
  cursor: pointer;
}

.videoOperateBox .zoomin:hover {
  background: url("../../static/videoControlIcon/4.png");
}

.videoOperateBox .zoomout:hover {
  background: url("../../static/videoControlIcon/2.png");
}

.videoOperateBox .zoomin {
  background: url("../../static/videoControlIcon/3.png");
}

.videoOperateBox .zoomout {
  background: url("../../static/videoControlIcon/1.png");
}

.videoOperateBox .left {
  width: 28px;
  height: 33px;
  background: url("../../static/videoControlIcon/left.png");
  left: 25px;
  top: 50%;
  margin-top: -16px;
}

.videoOperateBox .left:hover {
  background: url("../../static/videoControlIcon/left-active.png");
}

.videoOperateBox .right:hover {
  background: url("../../static/videoControlIcon/right-active.png");
}

.videoOperateBox .top:hover {
  background: url("../../static/videoControlIcon/top-active.png");
}

.videoOperateBox .bottom:hover {
  background: url("../../static/videoControlIcon/bottom-active.png");
}

// .videoOperateBox .center:hover {
//   background: url("../../static/videoControlIcon/center-active.png");
// }

.videoOperateBox .right {
  width: 28px;
  height: 33px;
  background: url("../../static/videoControlIcon/right.png");
  right: 25px;
  top: 50%;
  margin-top: -16px;
}

.videoOperateBox .top {
  width: 33px;
  height: 28px;
  background: url("../../static/videoControlIcon/top.png");
  top: 25px;
  left: 50%;
  margin-left: -16px;
}

.videoOperateBox .bottom {
  width: 33px;
  height: 28px;
  background: url("../../static/videoControlIcon/bottom.png");
  bottom: 25px;
  left: 50%;
  margin-left: -16px;
}

// .videoOperateBox .center {
//   width: 44px;
//   height: 40px;
//   background: url("../../static/videoControlIcon/center.png");
//   left: 50%;
//   top: 50%;
//   margin-top: -20px;
//   margin-left: -22px;
// }
</style>