老师,我做了一个解决回退视频,和快进一段视频,弹幕也跟着播放的方案。请老师看一下这样做好不好?
腾讯云视频有个监听当前播放时间改变的事件,
player.on('timeupdate', changeVideoDurationTime);
var currentVideoTime = 0;//记录当前视频的播放时间点
//当视频当前播放时间更改时,记录当前时间 function changeVideoDurationTime() { //判断当前是否在播放中 //如果处于不在播放中,就不用判断了 if (isPlay) { //记录的时间>当前时间.或。 当前时间>记录时间超过3秒 //也就是意味着人们刻意拨动了视频的进度 if (currentVideoTime > player.currentTime() || (player.currentTime() - currentVideoTime) > 3) { //循环遍历判断记录的时间点,大于哪一条弹幕时间点,最后取出符合当前时间的最大弹幕索引值 var indexa = 0; for (var i = 0; i < barrageList.length; i++) { if (player.currentTime() > barrageList[i].time) { //记录一下最符合的弹幕索引 indexa = i; } } //把最符合的弹幕索引值赋值给,之前的 setInterval 函数中, 当时间 > barrageList[videoBarrageIndex] 的 videoBarrageIndex //它会再次以这个最符合的弹幕索引值开始向后遍历比较 videoBarrageIndex = indexa; // layer.msg(videoBarrageIndex); } //更新视频记录时间点 currentVideoTime = player.currentTime(); } }
另外,视频播放完,或者播放完最后一个弹幕,是不是最好不给clearnInterval,因为用户可能还会往回调进度,所以就不让这个interval清空了。为了节省性能,给这个判断,也添加一个只有在视频播放时才会去调用的条件。
//线程遍历播放该视频的所有弹幕 function playALLVideoBarrage() { // 如果index大于全部弹幕的数量,就直接返回,也不用做后面的判断了 if (videoBarrageIndex + 1 > barrageList.length) { return; } //当视频当前时间点 大于 弹幕集合中的指定的时间点,就让它显示弹幕到屏幕 if (isPlay) { if (player.currentTime() > (barrageList[videoBarrageIndex].time)) { layer.msg("播放索引为:" + (videoBarrageIndex) + "的弹幕"); //取出指定弹幕的内容,显示到屏幕上 createAndShowOneBarrage(barrageList[videoBarrageIndex].content); //索引值自增 videoBarrageIndex++; } } }
window.onload = function (event) { barrageList = [[${barrageList}]]; barrageInterval = setInterval(playALLVideoBarrage, 300);//这个方法是线程处理的 }