[Dev's] 영상에 vtt 자막 동적으로 생성, 제어하기

    var http = new XMLHttpRequest();
    http.open('HEAD', vttsrc, false);
    http.send();
    // 자막은 항상 1개만 사용한다
	videoJsOption.tracks = [];
    console.log(http.status);
    
    if (http.status == "200") {
    	//자막파일이 있음, 자막 기능 활성화
    	if (player.options_.tracks[0] != null) { 		
    		player.removeRemoteTextTrack(player.textTracks_.tracks_[0]);
    		player.addRemoteTextTrack({
	    		    kind: 'captions',
	    		    srclang: 'ko',
	    		    label: "자막"+index,
	    		    src: vttsrc
    			});
    	} else {
    		player.options_.tracks.push({src: vttsrc,kind:'subtitles' ,srclang:'ko',label:"자막"+index});
    	}
  
    } else {
    	if (player.options_.tracks[0] != null) { 	
    		player.removeRemoteTextTrack(player.textTracks_.tracks_[0]);
    	}
    }

 

먼저 서버 저장소에 자막파일이 있는지 확인한다.

200이면 있고, 404면 없는것...

 

그리고 0번째 트렉에 아무것도 없으면 push하고, 있다면

삭제한 뒤, addRemoteTextTrack() 을 사용하여 새로운 자막을 추가해준다.

 

이게 영상은 push로 0번부터 n번까지 영상이 저장되는데

이것에 맞춰서 자막을 push 해버리면, 영상의 자막 버튼을 눌렀을 때 모든 자막 목록이 출력된다.

때문에, 영상을 재생할 때 마다 이 영상에 맞는 자막파일이 있는지 확인하고 추가해주는 방식을 채택했다.