Question

有没有人知道如何或有一个例子或某人的链接提供了很好的例子？我有XML文件，包括“开始”时间，“dur”时间和字幕文本。在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有用。

您需要的算法并不是特别困难。实际上，您希望通过监听progress事件并根据视频的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，并且省去了将其转换为更有用的东西的麻烦。

有没有人有XML字幕的视频时间算法示例，其具有“开始”和“持续时间”以匹配视频持续时间？

1 个答案: