HTML5，如何将视频当前时间与字幕数组匹配以在Javascript中打印字幕？

我创建了从XML获取开始，持续时间和文本的subtitleArray。现在我怎样才能与包含循环和if语句的视频当前播放时间相匹配。如果是，则在网站上打印标题。下面是一些代码，HTML5，如何将视频当前时间与字幕数组匹配以在Javascript中打印字幕？

function init() 
      { 
       var subtitleArray = new Array(); 
       var tempArray = new Array(); 
       var c = document.getElementById('container'); 

       captionsDoc = loadXMLDoc("captions.xml"); 
       x=captionsDoc.getElementsByTagName('text'); 

       for(var i=0;i<x.length;i++) 
       { 
        var tempArray = new Array(); 
        tempArray[0] = x[i].getAttribute('start'); // get start time 
        tempArray[1] = x[i].getAttribute('dur'); // get duration time 
        tempArray[2] = x[i].childNodes[0].nodeValue; // get text 

        subtitleArray[i] = tempArray; //put all 3 values in array 


       } 

       video = document.getElementById("caption"); 

       video.addEventListener('progress', progressHandler); 
        var text = "", cap = ""; 

       function progressHandler() { 

       for(int i = 0; i < subtitleArray.length;i++) 
       { 
        var currentTime = video.getCurrentTime(); 
        var cueStart = parseFloat(subtitleArray[i][0]); 
        var cueEnd = cueStart + parseFloat(subtitleArray[i][1]); 
        var diff = cueStart - currentTime; 
           cap = subtitleArray[i][2]; 

        if (currentTime >= cueStart && currentTime <= cueEnd) { 
         text = cap.text; 
        } 
       } 


       c.innterHTML = text; 



      } 
      window.onload = init; 
     </script> 
    </head> 

    <body> 
     <video id="caption" width="320" height="240" controls> 
      <source src="caption.mp4" type="video/mp4"> 
     </video> 
     <div id="container"> 
     </div> 
    </body>

来源

2013-03-20 StudentIT

我不知道你是否已经看过，并驳回，但我相信Popcorn.js为这个使用而设计：http://popcornjs.org/

我相信他们有HTML5视频演示与幻灯片套件，文本等同步。

它是Github上的开源代码，并有许多演示。

来源

2013-03-20 12:59:35

这不是我要找的。我只想通过匹配视频当前时间，然后在下面显示标题文字来使其工作的简单标题。 – StudentIT 2013-03-20 13:07:03

@StudentIT了解。如果没有人回答，也许你可以查看Popcorn.js代码，看看他们如何监控视频时间，以便将事件与它结合。 – 2013-03-20 13:27:26

怎样才能在popcorn-complete.js中使用具有开头，dur和文本的字幕XML？ – StudentIT 2013-03-25 16:42:52

HTML5，如何将视频当前时间与字幕数组匹配以在Javascript中打印字幕？

回答

相关问题