[HTML5, jQuery] 비디오 및 자막 제어

HTML5 에서 새로 추가된 video 태그를 사용하면,

동영상을 웹에서 쉽게 보여줄 수 있고, 또한 자막도 함께 보여줄 수 있습니다.

아래 소스는 로컬에 저장된 자막파일을 읽어, 단어를 검색하고

또 video element 의 currentTime 속성을 통해 재생되고 있는 동영상의 재생 위치를

바꾸는 소스 코드입니다 :)

<!-- jQuery 사용 선언 



function setTime(){
 myVid=document.getElementById('video1');
 myVid.currentTime=$('#searchTime').val();
}

$(document).ready(function() {

 $('#searchText').val("이론");
 $('#searchTime').val("10");

        
 $('#btn').click(function(){
  var msg = $('#searchText').val();

                
  jQuery.get('sub.vtt', function(data) {
   var lines = data.split("\n");

   $.each(lines, function(n, elem) {
    if(elem.indexOf(msg) != -1) {
     $('#end').append('

' + elem + '
');
    }
    });
   });
  });
 }
);




검색 : 


시간 이동 :