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

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

1.避免同时播放

<video v-for="(item,index) in trailer" :key="index" 
			class="Trailer" :data-id="item.id" :src="item.src" 
			@play="playing" :id="item.id">
</video>

<script>
	let that = null;
	export default {
		data() {
			return {
				windowWidth: '',
				windowHeight:'',
				trailer: [{
					"id": '12',
					"src": "https://codemaster-teaching-material.codemao.cn/1625546912491G6-P21.2(0519).mp4"
				},{
					"id": '45',
					"src": "https://codemaster-teaching-material.codemao.cn/1625546956268G6-P21.3(0519).mp4"
				},{
					"id": '78',
					"src": "https://codemaster-teaching-material.codemao.cn/1625552437104G6-P21.4(0517).mp4"
				},
				{
					"id": '90',
					"src": "https://codemaster-teaching-material.codemao.cn/1625552437104G6-P21.4(0517).mp4"
				},
				{
					"id": '92',
					"src": "https://codemaster-teaching-material.codemao.cn/1625552437104G6-P21.4(0517).mp4"
				},
				]
			};
		},
    methods: {
        Init() {
				uni.getSystemInfo({
					success: function(res) {
						this.windowWidth = res.windowWidth;
						this.windowHeight = res.windowHeight;
						console.log(this.windowHeight)
						},
				})
		},
        playing(e) {
				console.log(e)
				let currentId = e.currentTarget.dataset.id
				        // uni.createVideoContext获取视频上下文对象
				        this.videoContent = uni.createVideoContext(currentId)
						console.log(currentId)
				        // 获取json对象并遍历, 停止非当前视频
				        let trailer = this.trailer
				        for (let i = 0; i < trailer.length; i++) {
				          let temp = trailer[i].id
				          if (temp !== currentId) {
				            uni.createVideoContext(temp).pause()
				          }
				        }
			}
    }
</script>

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)
						},
					})
			},
」