shop-live/pages/live/spectator.nvue

<template>
	<view class="container">
		<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
			<!-- 
			 1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
			 2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
			 3.由于方法比较多，可以采取下面的方式查看代码：
			 （1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
			 （2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
			 -->
			<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false"
				ref="listBox" :pagingEnabled="true" :scrollable="true">
				<!-- 循环数据 -->
				<cell v-for="(item,i) in dataList" :key="i">
					<!-- 用div把视频模组套起来 -->
					<div :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
						<!-- <view v-if="Math.abs(k-i)<=1"> -->
						<view v-if="Math.abs(k-i)<=1">
							<view class="root">
								<video :ref="'item'+i" :id="item.id" :loop="true" :autoplay="i == k"
									:src="item.pull_url" :muted="item.isplay" :enable-progress-gesture="false"
									:page-gesture="false" :controls="false" :show-loading="true" :is-live='true'
									@error='vedioerr' :show-fullscreen-btn="false" :show-center-play-btn="false"
									:style="boxStyle" :object-fit="object_fit" @timeupdate="timeupdate($event,i)"
									@click="videoclick"
									>

								</video>
								<!-- {{item}} {{i}} -->

							</view>
							<sd-float-page :room='room' :msgList='msgList' ref="childRef" :heightG='boxStyle.height'
								:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;position: absolute;' "></sd-float-page>
						</view>
						

					</div>
				</cell>
			</list>
		</view>


	</view>
</template>
<script>
	import list from '@/uni_modules/uview-ui/libs/config/props/list';
	import sdFloatPage from '@/components/sd-live-page/livepage.nvue';
	import {
		VUE_APP_WS_URL
	} from '@/config/app';

	import json from '../../static/js/json';
	export default {
		components: {
			sdFloatPage
		},
		data() {
			return {
				imgHost: '',
				//下面打🌟号的是必须要的基础字段
				//下面打💗号的是拥有滑动条的必须字段
				dataList: [], //用于数据循环的列表🌟💗
				wHeight: 0, //获取的屏幕高度🌟💗
				boxStyle: { //视频，图片封面样式🌟💗
					'height': 0,
					'width': 0,
				},
				k: 0, //默认为0🌟💗
				max: 2,
				playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题🌟💗
				ready: false, //可忽略
				isDragging: false, //false代表停止滑动🌟💗
				refreshing: true, //用于下拉刷新🌟💗
				windowWidth: 0, //获取屏幕宽度🌟💗
				windowHeight: 0,
				dex: [0, 0], //用于判断是上滑还是下滑，第一个存旧值，第二个存新值【目前在1.0.7已经废弃】
				currents: 0, //用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
				platform: '', //用于获取操作系统：ios、android🌟💗
				playIng: false, //用于视频初始化时是否播放，默认不播放🌟💗
				videoTime: '', //视频总时长，这个主要用来截取时间数值💗
				videoTimes: '', //视频时长，用这个来获取时间值，例如：00:30这个时间值💗
				changeTime: '', //显示滑动进度条时变化的时间💗
				isShowimage: false, //是否显示封面【1.0.4已废弃，但是意思需要记住】
				currenttimes: 0, //当前时间💗
				isShowProgressBarTime: false, //是否拖动进度条，如果拖动（true）则显示进度条时间，否则不显示（false）【1.0.4已废弃，但是意思需要记住】
				ProgressBarOpacity: 0.7, //进度条不拖动时的默认值，就是透明的💗
				dotWidth: 0, //播放的小圆点，默认没有💗
				deleteHeight: 0, //测试高度🌟💗
				percent: 0, //百分小数💗
				currentPosition: 0, //滑块当前位置💗//2.0已弃用，现已用于后端参数
				currentPositions: 0, //滑块当前位置的副本💗//2.0已弃用，现已用于后端参数
				newTime: 0, //跟手滑动后的最新时间💗
				timeNumber: 0, //🌟💗
				ProgressBarBottom: 20, //进度条离底部的距离💗
				object_fit: 'cover', //视频样式默认包含🌟💗
				mode: 'aspectFit', //图片封面样式🌟💗
				timeout: "", //🌟用来阻止 setTimeout()方法
				voice: "", //🌟用来阻止 setTimeout()方法
				oldVideo: "",
				isAutoplay: false, //是否开启自动播放(默认不开启)
				autoplayText: "开启自动播放",
				msgList: [],
				room: {},
				socketTask: null,
				userName: '',


			}
		},

		watch: {
			async k(new_k, old_k) { //监听 k 值的变化，可以控制视频的播放与暂停
				const max = new_k + 2;
				if (this.max < max) {
					this.max = max;
				}
				// if (this.oldCurrent != this.currentNav) {
				// 	this.oldCurrent = this.currentNav
				// 	return false
				// }
				this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
				this.dataList[old_k].isplay = true
				this.dataList[old_k].state = 'pause'
				// console.log('预留第' + (old_k) + '个视频：' + this.dataList[old_k].community_id)
				// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
				uni.createVideoContext(this.dataList[old_k].community_id, this)
					.pause() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
				// console.log('已经暂停 --> 第' + (old_k) + '个视频～') //提示
				this.dataList[new_k].state = 'play'
				this.dataList[new_k].isplay = false
				this.dataList[new_k].playIng = true
				uni.createVideoContext(this.dataList[new_k].community_id, this).play()
			}
		},
		onShow() {
			uni.hideLoading();
			// console.log('回到前台' + this.dataList.length);
			if (this.dataList.length !== 0) {
				this.dataList[this.k].state = 'play';
				setTimeout(() => {
					uni.createVideoContext(this.dataList[this.k].id, this).play()
				}, 250)
			}
		},
		onHide() {
			this.dataList[this.k].state = 'pause'; //界面隐藏也要停止播放视频
			setTimeout(() => {
				uni.createVideoContext(this.dataList[this.k].community_id, this).pause(); //暂停以后继续播放
			}, 250)
			// console.log('到后台');
		},
		onLoad(options) {
			this.platform = uni.getSystemInfoSync().platform
			this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
			this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
			this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
			this.boxStyle.height = this.wHeight; //改变视频高度
			console.log(this.boxStyle.height,'1111111111111111')
			this.room = JSON.parse(decodeURIComponent(options.data));

			this.get()

		},
		mounted() {

		},
		Ready() {},
		methods: {
			

			autoPlay() {
				this.isAutoplay = !this.isAutoplay;
				if (!this.isAutoplay) {
					this.autoplayText = "开启自动播放"
					uni.showToast({
						title: "关闭自动播放",
						icon: 'none',
						duration: 3000
					})
				} else {
					this.autoplayText = "关闭自动播放"
					uni.showToast({
						title: "开启自动播放",
						icon: 'none',
						duration: 3000
					})
				}
			},
			getData() {
				// 这里就是数据加载完以后再向后端发送数据的地方,


			},
			vedioerr(e) {
				let timer = null
				if (e.tye = 'error') {
					timer = setInterval((res) => {
						uni.createVideoContext('myVideo', this).play()
						console.log('重新连接', '1111111111')
					}, 600000)
				} else {
					timer = null
				}

			},

			touchstart(event) {
				this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
				this.dataList[this.k].isShowProgressBarTime = true //显示时间线
				this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
				this.dotWidth = 10 //让点显示起来更明显一点
			},
			touchend() { //当手松开后，跳到最新时间
				uni.createVideoContext(this.dataList[this.k].community_id, this).seek(this.newTime)
				if (this.dataList[this.k].state == 'pause') {
					this.dataList[this.k].state = 'play'
					uni.createVideoContext(this.dataList[this.k].community_id, this).play()
				}
				this.dataList[this.k].isShowProgressBarTime = false //触摸结束后，隐藏时间线
				this.dataList[this.k].isShowimage = false //触摸结束后，隐藏时间预览
				this.ProgressBarOpacity = 0.5 //隐藏起来进度条，不那么明显了
				this.dotWidth = 0 //隐藏起来进度条，不那么明显了
			},
			touchmove(event) { //当手移动滑块时，计算位置、百分小数、新的时间
				var msg = []
				if (this.videoTime !== '') {
					msg = this.videoTime.split(':')
				}
				var timeNumber = Number(msg[0]) * 60 + Number(msg[1])
				this.currentPositions = event.changedTouches[0].screenX
				this.percent = this.currentPositions / this.windowWidth
				this.newTime = this.percent * timeNumber
				this.currenttimes = parseInt(this.newTime)
				let theTime = this.newTime
				let middle = 0; // 分
				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
				}
				this.changeTime =
					`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
			},
			timeupdate(event, index) { //计算滑块当前位置，计算当前百分小数
				if (index == this.k) {
					var currenttime = event.detail.currentTime
					this.timeNumber = Math.round(event.detail.duration)
					this.getTime()
					this.percent = currenttime / this.timeNumber
					this.currentPosition = this.windowWidth * this.percent
					let theTime = currenttime
					let middle = 0; // 分
					if (theTime > 60) {
						middle = parseInt(theTime / 60);
						theTime = parseInt(theTime % 60);
					}
					this.changeTime =
						`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
					//自动切换视频
					if (this.isAutoplay) { //true,代表自动播放
						if (Math.round(currenttime) == this.timeNumber - 1) {
							const dom = uni.requireNativePlugin('dom')
							let doms = 'item' + (this.k + 1)
							setTimeout(() => {
								let el = this.$refs[doms][0]
								dom.scrollToElement(el, {
									offset: 0,
									animated: true
								})
							}, 500)
						}
					}
				}
			},
			getTime() { //得到时间函数
				this.videoTime = this.formatSeconds(this.timeNumber);
				var msg = []
				if (this.videoTime !== '') {
					msg = this.videoTime.split(':')
				}
				this.videoTimes = `${msg[0]>9?msg[0]:'0'+msg[0]}:${msg[1]>9?msg[1]:'0'+msg[1]}`;
			},
			formatSeconds(value) { //获取时间函数
				let theTime = parseInt(value); // 秒
				let middle = 0; // 分
				if (theTime > 60) {
					middle = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
				}
				return `${middle>9?middle:middle}:${theTime>9?theTime:theTime}`;
			},
			moreVideo(index) {

			},
			toVideo(index) {

			},
			scrolls(event) {

				this.showManage = false;
				this.isDragging = event.isDragging;
				if (!event.isDragging) { //isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
					var i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight +
						1)) //先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
					if (i !== this.k) { //这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
						if (uni.getSystemInfoSync().platform == 'ios') {
							this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
							this.dataList[this.k].state = 'play'
							// console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
						} else {
							clearTimeout(this.timers);
							this.timers = setTimeout(() => {
								this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
								this.dataList[this.k].state = 'play'
								// console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
							}, 80)
						}
					}
				}
			},
			get() {
				let that = this
				var msg = [this.room];
				console.log(this.room)
				for (let i = 0; i < msg.length; i++) {
					msg[i]['isMore'] = false
					msg[i]['playIng'] = false
					msg[i]['state'] = false
					msg[i]['isplay'] = false
					msg[i]['loading'] = false
					msg[i]['id'] = msg[i]['live_stream_id']
				}
				this.dataList = msg;

				if (this.dataList.length !== 0) {

					this.dataList[this.k].state = 'play';
					uni.createVideoContext(this.dataList[this.k].id, this).play()
					this.page = that.page + 1
				}

				console.log(this.dataList, this.dataList[this.k].id, 222222)
			},
			onpullingdown() {
				this.refreshing = true
			},
			onrefresh() {
				setTimeout(() => {
					this.refreshing = false
				}, 1000)
			},

		},
		onReachBottom() {
			uni.$emit('onReachBottom');
		},
	}
</script>
<style lang="scss" scoped>

</style>