zhgdyunapp_vue3/pages/videoManage/playBackVideoOld.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> -->
		<video class="videoBox" id="myVideo" ></video>
		<!-- :custom-cache="false" :src="url" controls autoplay -->
		<view class="videoName">
			<text>{{passData.videoName}}</text>
			<text>{{passData.beginTime}}<br />至<br />{{passData.endTime}}</text>
			
		</view>
	</view>
</template>

<script>
	import headers from '../../components/headers/headers.vue';
	import videojs from 'video.js';
	import 'video.js/dist/video-js.min.css';
	// import 'videojs-contrib-hls';
	import 'videojs-flvjs-es6';
	import 'videojs-flash';
	// import SWF_URL from 'videojs-swf/dist/video-js.swf';
	export default {
		components:{headers},
		data() {
			return {
				url:'',//rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
				streamType: 1, //1是子码流    2是主码流
				passData: {},
				streamType: 'RTSP',
				player: null
			};
		},
		onLoad(options) {
			//videoType    1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
			// this.url = options.url
			if(options.obj){
				this.passData = JSON.parse(options.obj)
			}
			console.log(this.passData,777888)
			this.loadData()
		},
		beforeDestroy () {
			this.disposePlayer()
		},
		methods:{
			// 初始化播放器
			initPlayer () {
				this.$nextTick(() => {
					let playerOption = {
						preload: 'auto', // 预加载
						autoplay: true, // 自动播放
						controls: true,
						techOrder: ['html5', 'flvjs', 'flash'], // 这里的顺序一定要 'flvjs' 在 'flash' 前面，要不然 flv 格式的就无法播放了
						// 如果报 app.js:242798 Uncaught TypeError: this.el_.vjs_getProperty is not a function 错误，只保留 'flash' 就不报错了
						// 报错 The "flash" tech is undefined. Skipped browser support check for that tech. 可以查看 videojs-flash 里面 node_modules 查看需要的 video.js 的版本，然后修改video.js的版本就可以了
						flash: {
							hls: { withCredentials: false },
							// swf: SWF_URL // 引入静态文件swf
						},
						flvjs: {
							mediaDataSource: {
								cors: true,
								withCredentials: false,
							},
						},
						sources: [
							{
								src: this.url,
								type: this.getType(this.streamType)
							}
						],
					}
					// uni.createSelectorQuery().in(this).select('#myVideo').boundingClientRect(result => {
					// 	if (result) {
					// 		this.viewHeight = result.height * 2
					// 	} else {
					// 		this.viewHeight = 0
					// 	}
					// }).exec();
					console.log(this.$el.querySelector('#myVideo'), uni.createSelectorQuery().in(this).select('#myVideo'))
					this.player = videojs(this.$el.querySelector('#myVideo'), playerOption, function onPlayerReady () {
						console.log('onPlayerReady', this)
					})
				})
			},
			//获取项目视频
			loadData() {
				var that = this
				let requestData = {
					projectSn: that.passData.projectSn,
					serialNumber: that.passData.serialNumber
				}
				if(that.passData.beginTime && that.passData.endTime){
					requestData.beginTime = that.passData.beginTime
					requestData.endTime = that.passData.endTime
				}
				that.sendRequest({
					url: "xmgl/videoItem/callPostPlaybackURLsV2",
					data: requestData,
					method: "POST",
					success(res) {
						console.log('找封面', res)
						that.url = res.result.url
						if(that.url.indexOf("10.168.1.100") != -1){
							that.url = that.url.replace("10.168.1.100", "42.180.188.17")
							console.log(that.url,888999)
						}
						that.initPlayer()
					}
				})
			},
			// 销毁播放器
			disposePlayer () {
				if (this.player) {
					this.player.dispose()
				}
			},
			getType (type) {
				let playerType = ''
				switch (type) {
					case 'FLV':
						playerType = 'video/x-flv'
						break
					case 'HLS':
						playerType = 'application/x-mpegURL'
						break
					case 'RTMP':
						playerType = 'rtmp/flv'
						break
					case 'RTSP':
						playerType = 'video/mp4'
						break
				}
				return playerType
			}
		}
	}
</script>

<style lang="scss" scoped>
.fullHeight{
	background-color: #F4F5FD;
}
.videoBox{
	width: 100%;
}
.videoName{
	margin: 20rpx 30rpx;
	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>