需求
播放音频或者视频,对应文字高亮展示以及滚动到该位置,红色方框是一个scroll
数据
代码
<div class="col-sm-12 float-none new-content" height="652">
//some infos
<input type="hidden" paraid="1" idindex="2" starttime="33.0" endtime="0.0" begintime="33">
<p>最近有一部大尺度反腐剧《以人民的名义》火了,剧中饰演人民好官的达康书记成了最热门的网红,秒杀一众锥子脸。</p>
<span class="hidden">次处是对应的翻译</span>
</div>
1
2
3
4
5
6
//init定义每个元素的top位置(改变滚动条的位置时使用)
$(".new-content").each(function(){
$(this).attr("height",$(this).offset().top);
});
//基本高度
heightFirst = $(".new-content:first").attr("height");
//media为空表示非媒体类型
if(media != ''){
mediaEventListener(media);
}
1
2
3
4
5
6
7
8
9
10
function mediaEventListener(media){
var mediaElement = $(media)[0];
//效果:时间更新时间(每秒调用2-3次该函数)
mediaElement.addEventListener('timeupdate', function(e){
currentPlay(e.currentTarget.currentTime);
});
//循环播放事件
mediaElement.addEventListener("playing", function(e){
var currentTime = e.currentTarget.currentTime;
if(currentTime == 0){
$("#newInfoList").scrollTop(0);
$(".current-play").removeClass('current-play');
}
});
}
/**
* 当前播放时间
* 正常情况下每秒调用2-3次
* 快进或者快退时,每次调用间隔时间比较大
* 基本思路:正常播放时根据beginTime,判断当前的播放位置,是否需要改变当前高亮行与滚动条位置
* 快进或者快退:比较时间,判断快进还是快退,通过向上(prev())或者向下(next())遍历,确定对应的播放位
* 置。通过init的每行的height的值,判断滚动位置。并记录本次currentTime,用于下次是否是快进或
* 者快退,若每行的高度改变,那么初始化height对应的值
* @param time
* @returns
*/
function currentPlay(currentTime){
//当前高亮行,current-play为高亮css(class)
var play = $(".current-play");
//是否需要调整滚动条的位置
var scrollFlag = false;
//通过比较timeLast判断是否时快进或者快退(间隔时间比较大)
if(Math.abs(currentTime-timeLast)>1){
var beginTime = play.find("input").attr("beginTime");
var nextBeginTime = play.next().find("input").attr("beginTime");
//判断是快进或者快退
var playTag = play;
//直接从开始快进到最后(音视频在结尾没有对应文字的情况)
if(play.length == 0){
var last = $(".new-content:last");
$("#newInfoList").scrollTop(last.attr("height"));
last.addClass('current-play');
return;
}
if(currentTime<beginTime){ //快退 time小于当前高亮行的beginTime,或者循环播放
//纠正播放高亮行
while(true){
var element = playTag.prev();
if(element.length==0){
//快退到没有对应文字的位置
//改变滚动条的位置
$('#newInfoList').scrollTop(0);
play.removeClass("current-play");
break;
}
//上一文本的播放时间
var prevBeginTime = element.find("input").attr("beginTime");
//当前播放时间大于上一播放时间,表示位置正确(若小与说明位置不对)
if(currentTime>prevBeginTime){ //高亮
scrollFlag = true;
play.removeClass("current-play");
element.addClass('current-play');
break;
}else{
playTag = element;
}
}
}else if(currentTime > nextBeginTime){ //大于下一高亮行的beginTime 快进
while(true){
var element = playTag.next();
if(element.length==0){
//到达底部
var last = $(".new-content:last");
play.removeClass('current-play');
last.addClass("current-play");
$("#newInfoList").scrollTop(last.attr('height'));
break;
}
var nextBeginTime = element.find('input').attr("beginTime");
var thisBeginTime = playTag.find("input").attr("beginTime")
console.log("current:" + currentTime + " this:" + thisBeginTime + " next:" + nextBeginTime);
//位置正确
if(currentTime < nextBeginTime && currentTime > thisBeginTime){
play.removeClass('current-play');
playTag.addClass('current-play');
scrollFlag = true;
break;
}else{
playTag = element;
}
}
}
}else{
//正常播放处理
var next = null;
if(play.length == 0){
next = $("#newInfoList").find(".new-content:first");
}else{
next = play.next();
}
var startTime = next.find("input").attr('startTime');
if(startTime-currentTime<0.5){
play.removeClass("current-play");
next.addClass("current-play");
scrollFlag = true;
}
}
//滚动到指定位置
if(scrollFlag){
$("#newInfoList").animate({
scrollTop : $('.current-play').prev().attr("height") - heightFirst
},10);
}
timeLast = currentTime;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
音视频播放时,对应文字同步高亮,思路是接口返回的数据中带有的Timing的值。scrollTop也是根据高亮的位置,滚动到事先定义好的(div的heigth属性)位置
---------------------
作者:希望1992
来源:CSDN
原文:https://blog.csdn.net/u010018421/article/details/70662467
版权声明:本文为博主原创文章,转载请附上博文链接!