音视频播放对应文字同步高亮且滚动到指定位置(scrollTop)

本是古典何须时尚 2021-12-20 00:19 208阅读 0赞

需求  
播放音频或者视频，对应文字高亮展示以及滚动到该位置，红色方框是一个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  
版权声明：本文为博主原创文章，转载请附上博文链接！