短视频页

技术点

scroll 事件 视频滚动超出可视区域时暂停

介绍

本页面的视频默认只展示个封面图，并未在每个视频位置真正使用 video 标签，只有当点击播放时，才将播放器组件渲染出来，所以页面始终只存在一个 video 标签，这样可以大大减少页面内存占用。
本页面在滚动时，做了当前播放的视频位置判断，当视频已滚动超出可视区域，则暂停视频播放。

相关代码

滚动超出时暂停播放

// 页面滚动控制 tabbar
onPageScroll(e) {
	const scrollY = e.scrollTop // 滚动条距离顶部高度

	if (this.data.videoId) {
		const safeHeight = app.globalData.windowHeight - 60;

		// 滚动超出可视范围(向上滚动与向下滚动)时关闭当前播放
		const query = wx.createSelectorQuery()
		query.select('#video_' + this.data.videoId).boundingClientRect()
		query.exec((res) => {
			if (res[0].top < -60 || res[0].top > safeHeight) {
				this.setData({
					videoId: null
				})
			}
		})
	}

	if (this.data.timer) clearTimeout(this.data.timer)

	let curTime = Date.parse(new Date)

	if (curTime - this.data.startTime >= 500) {
		this._setTabBar(scrollY)
		this.data.startTime = curTime
	} else {

		this.data.timer = setTimeout(() => {
			this._setTabBar(scrollY)
		}, 200)
	}
}