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

• 需求
  播放音频或者视频，对应文字高亮展示以及滚动到该位置，红色方框是一个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>

//init定义每个元素的top位置(改变滚动条的位置时使用)
$(".new-content").each(function(){
    $(this).attr("height",$(this).offset().top);
});
//基本高度
heightFirst = $(".new-content:first").attr("height");
//media为空表示非媒体类型
if(media != ''){
    mediaEventListener(media);                  
}

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;
}

音视频播放时，对应文字同步高亮，思路是接口返回的数据中带有的Timing的值。scrollTop也是根据高亮的位置，滚动到事先定义好的(div的heigth属性)位置