popcorn.js를 사용하여 XML 자막을 표시하지 않는 이유는 무엇입니까?

팝콘 자바 스크립트 웹 사이트에서 팝콘을 받았습니다. 시작, 끝 및 텍스트에 대해 하드 코딩 된 상태로 잘 실행됩니다. 이제 자막 XML (start, dur 및 text)을 가져 와서 subtitleArray에 저장하는 또 다른 기능을 추가했습니다. 첫 번째 텍스트 자막을 firstLine (subtitleArray [0] [2])로 바꿉니다. 그런 다음 실행하면 첫 번째 행은 표시되지 않지만 다음 행은 표시됩니다. 나는 아마도 그것이 동시에 모든 기능을 수행하지 않을 것이라고 생각하거나 다른 것입니까?popcorn.js를 사용하여 XML 자막을 표시하지 않는 이유는 무엇입니까?

<html> 
    <head> 
     <title>HTML5 included Javascript....</title> 
     <meta name="description" content="Test" charset="utf-8"></meta> 
     <script src="popcorn.js"></script> 
     <script type="text/javascript"> 

       var subtitleArray = new Array(); //stored all values from XML caption file 
       var firstLine; 


       function loadXMLDoc(dname) 
       { 
        if (window.XMLHttpRequest) 
        { 
        xhttp=new XMLHttpRequest(); 
        } 
        else 
        { 
        xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        xhttp.open("GET",dname,false); 
        xhttp.send(); 

        return xhttp.responseXML; 
       } 

       function getCaption() 
       { 

        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 


        }   

        c.innerHTML = subtitleArray[0][2]; 
        firstLine = subtitleArray[0][2]; 

       } 

       document.addEventListener("DOMContentLoaded", function() { 

        var popcorn = Popcorn("#video"); 


        popcorn.subtitle({ 
         start: 0, 
         end: 3, 
         text: firstLine, // "Hello World" replace to subtitleArray[0][2] 
         target: "text" 
        }).subtitle({ 
         start: 3, 
         end: 6, 
         text: "This is second line", 
         target: "text" 
        }); 

        popcorn.play(); 
       }, false); 

      window.onload = getCaption; 

     </script> 
    </head> 
    <body> 

     <div> 
      <video id="video" width="320" height="240" controls="true" preload="none"> 
       <source src="caption.mp4" type="video/mp4" /> 
       <source src="caption.webm" type="video/webm" /> 
       <source src="caption.ogg" type="video/ogg" /> 
      </video> 
     </div> 
     <div id="text" style="width:980px;height:50px;"></div> 
     <div id="container"></div> 
    </body> 
</html>

출처

2013-03-25 StudentIT

for (var i = 0; i < subtitleArray.length; i++) { 
    pop.footnote({ 
     start: subtitleArray[i][0], 
     end: subtitleArray[i][1], 
     text: subtitleArray[i][2], 
     target: "yourDiv'sId" 
    }); 

}

출처

2013-10-03 14:00:53 Roman

popcorn.js를 사용하여 XML 자막을 표시하지 않는 이유는 무엇입니까?

답변

관련 문제