1

有谁知道如何或有示例或来自某人提供的好示例的链接？我有包含“开始”时间、“持续”时间和字幕文本的 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>
4

1 回答 1

2

您可能会发现这个HTML5 视频 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 并省去将其转换为更可用的东西的麻烦。

于 2013-03-14T22:26:05.693 回答