uniapp播放视频解决:同时播放、不可视区域播放

uniapp播放视频实现的组件为video

1.避免同时播放

2.不可视区域停止播放视频

生命周期里有一个onPageScroll(),监听页面的滑动。

里面有一个关于uview的getRect()函数,详细看网页资料:getRect 节点布局信息 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

onPageScroll() {
			var that = this;
			// console.log(that)
			this.$u.getRect('.' + "Trailer",true).then(rect => {
				console.log(rect)
				let a = rect
				for (let i = 0; i < a.length; i++) {
					// 判断top数值 向上滑动,不可视时暂停播放
					if (a[i].top <= 0) {
						console.log(a[i].dataset.id)
						uni.createVideoContext(a[i].dataset.id).pause()
					}
					// 向下滑动,不可视时暂停播放
					else if (a[i].top > this.windowHeight) {
						// console.log(this.windowHeight)
						// console.log(a[i].dataset.id)
						uni.createVideoContext(a[i].dataset.id).pause()
					}
				}
			})
},
methods: {
			Init() {
				uni.getSystemInfo({
					success: function(res) {
						this.windowWidth = res.windowWidth;
						this.windowHeight = res.windowHeight;
						console.log(this.windowHeight)
						},
					})
			},
」

你可能感兴趣的:(音视频,vue.js,前端,javascript)