期望效果，当滑动列表结束后，屏幕中间的视频自动播放

HTML页面

• 自动播放的实际就是上来展示的都是封面图
• 当你通过你屏幕中间视频的索引改变
• 通过v-if改变你的封面图，将你的视频拿出来重新渲染
• 有的需要设置muted静音播放

<template>
	<view class="content">
		<div class="card" v-for="(item,index) in list" :key="index" :id="'cell'+index">
			<video class="videos" :show-play-btn='false' :muted='true' :autoplay="true" :data-isLeft='true' v-if="currentindex==index" src="http://source.picsrock.com/upload/solitaire/2022/12/10/3febdb5d-f92a-403c-a042-37d831aaaaa1.mp4"></video>
			<image v-else src="../static/logo.png" mode=""></image>
		</div>
	</view>
</template>

data变量

data() {
			return {
				list:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
				timer:"",
				duiListHeight:[],
				currentindex:0,//目的页面一进来，先播放第一个
			}
		},

实践操作！

• 小程序中，你可以采用onPageScroll（）监听页面滚动
• 但注意的是，如果一边滚一边监听而去查数据，会造成数据的大量加载
• 所以，采取定时器,时间可调节

//监听页面滚动
onPageScroll(e) {
	let sTop = e.scrollTop.toFixed(0); // 屏幕滑动距离
	let that = this
	clearTimeout(that.timer)
		that.timer = setTimeout(() => {
			//that.$refs.duiduipeng.changeCell(sTop)//当你操作的数据是子组件的数据的时候采用这个
			that.getRectInfo() //如果不是就直接采用页面数据
	}, 500)
},

重点来了！

• 本次实践是在uniapp中，先在html中加上动态id名
• 你需要上来获取你页面中所有的dom的节点信息，获取到他们的top值
• 因为这个top值，就是节点距离屏幕顶端的距离
• 你需要将他们存在新数组
• 而你此时要做的就是，就是判断这个新数组中，位于屏幕中央的数组，我设置的是150-450这个范围
• 然后将通过新数组的下标改变数据数组的下标的数据信息，从而让他自动播放

//自动播放视频
getRectInfo: function(list) {
	let that = this
	that.duiListHeight = []
		// 定位
		setTimeout(function() {
			for (let i = 0; i < that.duiList.length; i++) {
				var query = uni.createSelectorQuery().in(that);
				var nodeDef = query.select('#cell' + i);
				nodeDef.boundingClientRect((data) => {
					var tmpHeight = data;
					that.duiListHeight.push(tmpHeight.top)
					that.duiListHeight.forEach((item, index) => {
						if (item > 150 && item < 450) {
							that.currentindex= index
						}
					})
				}).exec();
			}
	}, 500)
},

滚动获得的数据

• 再里面筛选出高度适合的范围数据
• 

实现效果

源码（粘贴即可运行）

• 更换一个可以用的视频地址

<template>
	<view class="content">
		<div class="card" v-for="(item,index) in list" :key="index" :id="'cell'+index">
			<video class="videos" :show-play-btn='false' :muted='true' :autoplay="true" :data-isLeft='true' v-if="currentindex==index" src="http:/xxxxxx/3febdb5d-f92a-403c-a042-37d831aaaaa1.mp4"></video>
			<image v-else src="../static/logo.png" mode=""></image>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16],
				timer:"",
				duiListHeight:[],
				currentindex:0,
			}
		},
		onLoad() {

		},
		//监听页面滚动
		onPageScroll(e) {
			let sTop = e.scrollTop.toFixed(0); // 屏幕滑动距离
			let that = this
			clearTimeout(that.timer)
				that.timer = setTimeout(() => {
					//that.$refs.duiduipeng.changeCell(sTop)//当你操作的数据是子组件的数据的时候采用这个
					that.getRectInfo() //如果不是就直接采用页面数据
			}, 500)
		},
		methods: {
			scroll(e) {
				console.log(e, "列表数据")
			},
			// 重置 loadmore
			setSpecialEffects() {
				this.$refs["list"].setSpecialEffects({
					id: "scroller",
					headerHeight: 150
				});
			},
			clearSpecialEffects() {
				this.$refs["list"].setSpecialEffects({});
			},
			//自动播放视频
			getRectInfo: function(list) {
				let that = this
				that.duiListHeight = []
					// 定位
					setTimeout(function() {
						for (let i = 0; i < that.list.length; i++) {
							var query = uni.createSelectorQuery().in(that);
							var nodeDef = query.select('#cell' + i);
							nodeDef.boundingClientRect((data) => {
								var tmpHeight = data;
								that.duiListHeight.push(tmpHeight.top)
								console.log(that.duiListHeight)
								that.duiListHeight.forEach((item, index) => {
									if (item > 150 && item < 450) {
										that.currentindex = index
									}
								})
							}).exec();
						}
				}, 500)
			},
		}
	}
</script>

<style>
	.content{
	}
	.card {
		position: relative;
		overflow: hidden;
		transition-duration: 0.3s;
		margin-bottom: 10px;
		width: 200px;
		height: 100px;
		background-color: #ffaa00;
		content-visibility: auto;
	}
	.videos{
		width:100%;
		height: 100%;
	}
	image{
		width:100%;
		height: 100%;
	}
	.card:before {
		content: '';
		position: absolute;
		left: -665px;
		top: -460px;
		width: 300px;
		height: 15px;
		background-color: rgba(255, 255, 255, 0.5);
		transform: rotate(-45deg);
		animation: searchLights 2s ease-in 0s infinite;
	}

	@keyframes searchLights {
		0% {}

		75% {
			left: -100px;
			top: 0;
		}

		100% {
			left: 120px;
			top: 100px;
		}
	}
</style>