JS TcPlayer 自动播放视频列表中处于屏幕中央的视频

VIP文章 debug真快乐

已于 2022-07-22 17:36:32 修改

阅读量828

点赞数

分类专栏： js 文章标签： javascript 音视频前端

于 2022-07-22 16:29:18 首次发布

本文链接：https://blog.csdn.net/qq_43734389/article/details/125934059

版权

用的是TcPlayer旧版，没有dispose方法，切换播放视频的场景使用remove视频播放dom来处理。切换这里卡了好久才发现旧版没有dispose方法无法直接销毁player，还是看到了大佬直接remove掉dom才知道还能这么玩……

主要思路为：

将屏幕三等分，做两条线，一条是从下到上1/3的线，另一条是从下到上2/3的线。定义这两条线之间的区域为播放区域
开三个全局参数分别放上一个视频，当前视频，下一个视频。
监听滚动。
1. 当当前视频滚到了播放区域之间时，播放当前视频。
2. 当当前视频向上滚出播放区域时，暂停当前视频，播放下一个视频；将当前视频赋值给上一个视频，将下一个视频赋值给当前视频，取下一个视频的next()赋值给下一个视频。
3. 当当前视频向下滚出播放区域时，暂停当前视频，播放上一个视频；将当前视频赋值给下一个视频，将上一个视频赋值给当前视频，取上一个视频的prev()赋值给上一个视频。
4. 当视频被暂停时，移除视频播放dom。这样即可避免旧版TcPlayer同一页面存在多个时造成的问题。

贴代码

	let preRecoItem = null // 列表中上一预备播放项目
	let currentRecoItem = null // 列表中当前预备播放项目
	let nextRecoItem = null // 列表中下一个预备播放项目
	// 播放线 两倍线这里就不定义了，用的时候就 2 * VIEW_LINE
	const VIEW_LINE = Number((document.documentElement.clientHeight / 3).toFixed()) 
	
	$(function(){
   
	    init()
	})
	// 初始化方法
	const init = async _ => {
   
		// 这里初始化视频列表