如何用JavaScript实现嵌入视频到达指定时间时高亮对应章节标题

Hey there! Let's get this working for you. The key here is to listen for the video's playback time changes, match it to your chapter timestamps, then apply a clear highlight style to the corresponding title. Here's how to do it step by step:

1. Add CSS for Highlight Style #

First, let's define a visible highlight style so users can instantly spot which chapter is active. Add this to your page (either in a <style> tag or external CSS file):

.chapter-title.active {
  background-color: #ffeb3b; /* Bright yellow highlight—tweak this to match your site's style */
  font-weight: bold;
}

2. Update HTML Structure #

We need to add identifiers to your chapter titles so we can link them directly to their timestamps. We'll use data-start and data-end attributes to define each chapter's time range, plus a shared class to target all titles easily:

<body>
  <div class="wrapper">
    <table class="toc" width="400">
      <tbody>
        <tr>
          <!-- Add chapter class and time range attributes -->
          <td class="chapter-title" data-start="0" data-end="311">1.1 Course Introduction</td>
          <td><button class="playbutton" onclick="Section11()" type="button">
            Play
            </button></td>
        </tr>
        <tr>
          <td class="chapter-title" data-start="312" data-end="9999">1.2 Introduction to the Software</td>
          <td><button class="playbutton" onclick="Section12()" type="button">
            Play
            </button></td>
        </tr>
      </tbody>
    </table>
    <video id="myvideo" width="1160" height="100%" controls>
      <source src="SW101.mp4" type="video/mp4">
    </video>
  </div>
</body>

Quick note: Set data-end to a large number like 9999 for the last chapter, or we'll update it automatically to the video's total duration later.

3. Enhance JavaScript Logic #

Now we'll add a listener to track when the video's playback time changes, plus functions to update the highlighted chapter. We'll also clean up your existing play button logic:

var vid = document.getElementById("myvideo");
var chapterTitles = document.querySelectorAll('.chapter-title');

// Function to check current time and highlight the matching chapter
function highlightActiveChapter(currentTime) {
  chapterTitles.forEach(title => {
    const start = parseFloat(title.dataset.start);
    const end = parseFloat(title.dataset.end);
    // Toggle the active class based on whether current time is in the chapter's range
    if (currentTime >= start && currentTime < end) {
      title.classList.add('active');
    } else {
      title.classList.remove('active');
    }
  });
}

// Listen for time changes as the video plays
vid.addEventListener('timeupdate', function() {
  highlightActiveChapter(vid.currentTime);
});

// Update highlight immediately when user clicks a play button
function Section11() {
  vid.currentTime = 0;
  vid.play();
  highlightActiveChapter(0);
}

function Section12() {
  vid.currentTime = 312;
  vid.play();
  highlightActiveChapter(312);
}

// Optional: Set the last chapter's end time to the video's total duration once it loads
vid.addEventListener('loadedmetadata', function() {
  const lastChapter = chapterTitles[chapterTitles.length - 1];
  lastChapter.dataset.end = vid.duration;
});

How This Works: #

• The timeupdate event fires nonstop as the video plays, so we check the current time and update the highlight every time the playback moves.
• We loop through all chapter titles, check if the current video time falls within the chapter's start/end window, and toggle the active class to highlight or unhighlight it.
• The loadedmetadata listener fixes the last chapter's end time to match the video's total length, so it stays highlighted until the video finishes.
• We also call highlightActiveChapter in the play button functions to make sure the highlight updates right away when the user jumps to a section.

That's all! Now when the video plays through each timestamp, the corresponding chapter title will automatically light up.

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