[Project] Slide the video list and play automatically

Expected effect, when the sliding list ends, the video in the middle of the screen will play automatically

HTML page

• The autoplay is actually showing the cover image
• When you pass the index of the video in the middle of your screen changes
• Change your cover art with v-if, take your video out and re-render
• Some need to set muted to play silently

<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 variable

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

Practice!

• In the applet, you can use onPageScroll() to monitor page scrolling
• However, it should be noted that if you check the data while listening while scrolling, it will cause a large amount of data loading
• So, take a timer, the time can be adjusted

//监听页面滚动
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)
},

Here comes the point!

• This practice is in uniapp, first add dynamic id name to html
• You need to come up to get all the dom node information in your page, get their top value
• Because this top value is the distance between the node and the top of the screen
• You need to store them in a new array
• And what you have to do at this time is to judge the array located in the center of the screen in this new array. I set the range of 150-450
• Then the data information of the subscript of the data array will be changed through the subscript of the new array, so that it can be played automatically

//自动播放视频
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)
},

Data obtained by scrolling

• Then filter out the highly suitable range data
• 

achieve effect

Source code (paste to run)

• Change an available video URL

<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>