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="'rtsp://42.180.188.17:'+url.substring(20)" 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>
</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是主码流
			};
		},
		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()
			}
		},
		methods:{
			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;
						}
					}
				})
			},
			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>
.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;
	}
}
.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>