如何实现数组控制下的英语练习网站句子高亮与点击跳转？

我要开发一款英语练习网站，核心功能如下：

• 网站包含多个视频，每个视频对应若干带起止时间的英语句子
• 支持重复播放指定句子（单句重复3次）
• 页面加载时，需以2列表格展示所有视频对应的句子
• 播放时，当前正在重复播放的句子需要高亮显示，切换句子时自动取消上一句的高亮
• 点击句子链接可直接跳转至对应视频片段播放

目前已完成视频调用功能，但句子高亮和点击句子跳转至对应片段的功能尚未实现，现有代码如下：

HTML代码 #

<video id="myVideo" width="500" height="400" controls autoplay loop>
    Your browser does not support the video tag.
</video>

<br>
<a href="#" onclick="myLoop()"> 播放 </a>

<br>
<p id="demo"></p>
<p id="allVideos"></p>

JavaScript代码 #

var sentences = [
  ['https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4', [
      [1, 2],
      [5, 7]
    ],
    [
      ['sentence 1'],
      ['sentence 2']
    ]
  ],
  ['https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', [
      [10, 12],
      [13, 17],
      [25, 36]
    ],
    [
      ['sentence 1'],
      ['sentence 2'],
      ['sentence 3']
    ]
  ],
  ['https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4', [
      [13, 15],
      [15, 19],
      [21, 30]
    ],
    [
      ['sentence 1'],
      ['sentence 2'],
      ['sentence 3']
    ]
  ]
];

let video_index = 0;
let time_index = 0;
let repeat = 0;

var video;
var maxTime;

document.addEventListener('DOMContentLoaded', () => {
  video = document.getElementById("myVideo");

  video.addEventListener("timeupdate", function() {
    if (video.currentTime >= maxTime) {
      myLoop();
    }
  }, false);
});

function playVideo(myUrl, startTime, endTime) {
  document.getElementById("demo").innerHTML += myUrl + " start:" + startTime + " end: " + endTime + "<br>";

  video.src = myUrl;
  video.currentTime = startTime;
  video.play();
  maxTime = endTime;
}


function myLoop() {
  if (!sentences[video_index]) {
    video.src = null;
    return;
  }
  playVideo(sentences[video_index][0], sentences[video_index][1][time_index][0], sentences[video_index][1][time_index][1]);
  repeat++;
  if (repeat >= 3) {
    repeat = 0;
    time_index++;
    if (time_index >= sentences[video_index][1].length) {
      time_index = 0;
      video_index++;
    }
  }
}

function jumpToVideo(vid_index){
    
  let text = "Do you want to play this video?";
  if (confirm(text) == true) {
    video_index = vid_index;
    time_index = 0;
    repeat = 0;
    myLoop();
  } 
    
}
function listVideos() {
  var vid_index = 0;
  for (const sentence of sentences) {

    const [video, timers, englishSentences] = sentence
    var videoLink = "<a href='#' onclick='jumpToVideo(" + vid_index + ")' >" + video + "</a><br><br>";

    document.getElementById("allVideos").innerHTML += videoLink;
    vid_index++;
  }
}
window.addEventListener('DOMContentLoaded',listVideos); // better than onload

内容的提问来源于stack exchange，提问作者Tom