短视频页

技术点

scroll 事件 视频滚动超出可视区域时暂停 keep-alive 页面离开时，滚动加载禁用

介绍

本页面涉及 滚动加载指令与 keep-alive 一起使用的情况，当页面离开时，由于组件未被销毁，滚动加载指令任然会在新页面滚动被触发，所以使用了一个标志位锁进行解决。
本页面的视频默认只展示个封面图，并未在每个视频位置真正使用 video 标签，只有当点击播放时，才将播放器组件 dom 插入到被点击的视频位置，所以页面始终只存在一个 video 标签，这样可以大大减少页面内存占用。
本页面在滚动时，做了当前播放的视频位置判断，当视频已滚动超出可视区域，则暂停视频播放。

相关代码

页面离开时阻止 v-infinite-scroll 指令滚动时继续触发

// 进入页面时解除锁
activated() {
	this.isLock = false;
},
// 离开页面时增加锁
deactivated() {
	this.isLock = true;
},

methdos: {
	loadMore() {
		// 有锁时滚动加载不发送请求
		if (this.isLock) return;
		this.getData(getVideos);
	}
}

滚动超出时暂停播放

// 绑定滚动事件
activated() {
	window.addEventListener("scroll", this.scrollHandle);
},
// 移除绑定事件
deactivated() {
	window.removeEventListener("scroll", this.scrollHandle);
},

// 监听滚动
methods: {
	// 页面滚动回调
	scrollHandle() {
		// 获取播放器位置
		const playElRect = this.playEl.getBoundingClientRect();
		
		const top = playElRect.top;         // 播放器距离页面可视区域距离，滚动超出时为负值
		const height = playElRect.height;   // 播放器高度

		// 滚动超出时暂停播放
		if (top < -height) {
			if (this.$refs.player.paused) return;
			this.$refs.player.handelPaused();
		}
	},
}

点击播放海报时，将播放器元素移动到该视频区域

methods: {
	playVideo({ video }) {
		// 如果点击为的视频已经播放，则return
		if (video.id == this.currentVideoId) return;

		this.currentVideoId = video.id;

		this.showPlayer = false;
		
		// 将播放器移动到当前播放的列表中
		let playerEl = document.querySelector("#player_" + video.id);
		playerEl.appendChild(this.$refs.player.$el);

		// 延迟,等播放器插入操作成功
		setTimeout(() => {
			this.showPlayer = true;
			this.$refs.player.play(video);
		}, 350);
	},
}