toggleHighlight可以正确使用HTML5视频和文本

Question

我正在尝试在javascript中使用toggleHighlight，以使我的文字与HTML5视频中的音频同步突出显示。下面是我正在使用的代码示例。任何人都可以看到我缺少哪些步骤才能正确使用此功能？谢谢。

HTML5

<!--Video Subtitles --> 

    <div id="transcript">

            <p><span class="cue" data-start="0">Now that we've looked at the architecture of the internet, let's see how you might</span>
            <span class="cue" data-start="4.13">connect your personal devices to the internet inside your house. </span></p>

CSS

.highlighted {
    color: orange;
}

Javascript（示例）

video.addEventListener("timeupdate", highlightText, false);


// Text highlighting as the video is playing 

// Highlight transcript
function highlightText() {
    //Get current video time
    var highlightTime = video.currentTime;

        //Highlight span corresponding to current time
        function toggleHighlight(n) {
            // Removed highlight from any unclicked text
            for (var i = 0; i < cues.length; i++) {
                cues[i].classList.remove("highlighted");
            }
            //Add highlighted class
            cues[n].classList.add("highlighted");
        }

        if (highlightTime > 0 && highlightTime < 4.13) {
            toggleHighlight(0);
        } else if (highlightTime > 4.13 && highlightTime < 7.535) {
            toggleHighlight(1);
        }