javascript - 有没有人有 "start"和 "duration"匹配视频持续时间的 XML 字幕的视频时间算法示例？

Question

有没有人知道如何或有例子或某人提供的链接提供了很好的例子？我有包含“开始”时间、“持续”时间和字幕文本的 XML 文件。在 HTML5 中，我有快照 MJPEG 电影。在播放 MJPEG 视频时，我能够获得 fps 持续时间小数位数。现在我想知道如何将此视频持续时间编号与字幕开始和持续时间编号一起使用，以便字幕文本可以在视频运行时显示匹配。

这是我的 XML 代码，

<transcript>
<text start="2.014" dur="1.276">Greetings fellow nerds.</text>
<text start="3.291" dur="3.446">In this video we&#39;re going to make glow sticks of various colors</text>
<text start="6.738" dur="2.277">and explain a few interesting points about them.</text>
<text start="9.016" dur="2.722">But first I need to crush your expectations.</text>
</transcript>

获取视频持续时间的Javascript变量名是profTime。

此处为 HTML 视频代码示例，id 为 profTime，

<div class="drsElement" 
 style="left: 47%; top: 52%; height: auto; width: 25%;   text-align:  left; " id="profDiv">
    <div class="drsMoveHandle" style = "position:relative;"><p id="profTime"> Time: 0</p></div>
        <div >
<input type="range" onchange="profOpc()" value="100" id="profOPC" min="20" max="100" />
</div>

    <div style=" width: auto; height: auto; position:relative; margin-bottom:7%;">
        <!-- video images area.... -->
        <img src="prof/0.jpg" style="width: 100%; height:auto;"   class="webcam2"  id="profVid"   alt="Live Stream"  onerror="ErrorPlayProf()"> 

    </div>
            <center>

        <input type="button" onclick="fivesecbackProf()" value="- 5 sec" id ="fivesecbackProfButt" />
        <input type="button" onclick="onesecbackProf()" value="- 1 sec" id ="onesecbackProfButt" />
        <input  type="button" onclick="liveProf()" value="Live" id ="liveProfButt" disabled = "true" />
        <input  type="button" onclick="onesecforProf()" value="+ 1 sec"id ="onesecforProfButt" disabled = "true" />
        <input  type="button" onclick="fivesecforProf()" value="+ 5 sec"id ="fivesecforProfButt" disabled = "true" />
    </center>

</div>

Answer 1

您可能会发现这个 interactive demonstration of the HTML5 video API有用。

您需要的算法并不是特别困难。本质上，您希望通过监听进度事件并根据视频的 currentTime 属性决定显示哪个 cuePoint 来监视视频播放的进度。以下是不完整的，但应该给你的想法。

var video = document.getElementById('video');
video.addEventListener('progress', progressHandler);

console.log(document.getElementById('video'));

function progressHandler() {
 //console.log(video.currentTime);
    var currentTime = video.currentTime;
    var cueStart = cuePoint.start;
    var cueEnd = cueStart + cuePoint.duration;

    if (currentTime > cueStart && currentTime < cueEnd) {
       displayCuePoint(cuePoint.text);   
    }
}

如果将 XML 中的每个文本节点映射到具有相应属性的 JavaScript 对象，您的生活可能会轻松很多。或者更好的是，首先将数据加载为 JSON，这样就省去了将其转换为更有用的东西的麻烦。