zhgdyunapp/pages/videoManage/playBackVideo.vue

<template>
	<view class="fullHeight">
		<headers :showBack="true" :themeType="'#3A7BFF'">
			<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">
			<text>南山科技创新中心--标段总承包1#吊塔</text>
			<text>2024-05-11 00:00:00</text>
		</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:{
			// 跳转到录像回放列表
			toBackList(){
				uni.navigateTo({
					url: './playBackList'
				})
			},
			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>
.fullHeight{
	background-color: #F4F5FD;
}
.videoBox{
	width: 100%;
}
.videoName{
	margin: 10px 15px;
	position: relative;
	display: flex;
	flex-direction: column;
	font-size: 32rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	text:nth-child(1){
		color: #000000;
	}
	text:nth-child(2){
		color: #6F6F6F;
		margin-top: 12rpx;
	}
}
</style>