onclick jquery로 두 번로드하는 비디오 자막

Question

내 문제에 대한 해결책을 누군가가 줄 수 있기를 바랍니다.

나는 비디오를 재생하는 웹 페이지가 있습니다. 동영상 아래에있는 버튼을 두 번 클릭하면 다른 동영상으로 변경되는 버튼이 있습니다. 각 동영상에는 .vtt 파일과 함께 자막이 있습니다.

이제 문제는 다른 비디오를 재생할 다른 버튼을 클릭 할 때마다 이전 비디오의 자막로드가 현재 비디오에 표시되고, 첫 번째 비디오를 클릭하면 자막이 맨 위에로드되기 시작합니다. 서로 겹쳐서 화면을 쌓아 올리십시오. 버튼을 클릭하여 다른 동영상을 볼 때 다른 동영상의 모든 자막이 서로 쌓입니다. 도와주세요 :)

이 HTML 코드

<video id="videoclip" class=" embed-responsive-item animated bounceIn" 
    width="760" height="415" controls> 
    <source id="mp4video" src="../vid/video1.mp4"> 
    <track id="subtitle" src="../vid/subtitles/video1sub.vtt" kind="subtitles" srclang="en" 
    label="English"> 
    </video> 

과 javascrip/JQuery와

 $(document).ready(function(){ 
      //HTML5 video object 
      var detailedVidObj = "#videoclip"; 


      //Reload the video object and automatically play it 
      function videoReloader(){ 
       $(detailedVidObj)[0].load(); 
       $(detailedVidObj)[0].play(); 

      } 

      $("#video1").click(function(){ 
       $("#mp4video").attr("src", "../vid/video1.mp4"); 
       $("#subtitle").attr("src", "../vid/subtitles/video1sub.vtt"); 
       videoReloader(); 
      }); 
      $("#video2").click(function(){ 
       $("#mp4video").attr("src", "../vid/video2.mp4"); 
       $("#subtitle").attr("src", "../vid/subtitles/video2sub.vtt"); 
       videoReloader(); 
      }); 
      $("#video3").click(function(){ 
       $("#mp4video").attr("src", "../vid/video3.mp4"); 
       $("#subtitle").attr("src", "../vid/subtitles/video3sub.vtt"); 
       videoReloader(); 
      }); 
      $("#video4").click(function(){ 
       $("#mp4video").attr("src", "../vid/video4.mp4"); 
       $("#subtitle").attr("src", "../vid/subtitles/video4sub.vtt"); 
       videoReloader(); 
      }); 
     }); 

이며,이 버튼

<button class="button btn btn-primary" id="video1">video One</button> 
    <button class="button btn btn-primary" id="video2">Video Two</button> 
    <button class="button btn btn-primary" id="video3">Video Three</button> 
    <button class="button btn btn-primary" id="video4">Video Four</button> 

Answer 1

내 생각에 대한 HTML입니다 새 자막 파일을로드 할 때 이전 자막 파일은 대체되지 않고 계속 재생됩니다. 이 경우 초기 자막 요소를 제거하고 새 자막 파일을 사용하여 새 자막 요소를 만드는 것이 좋습니다.

$("#video1").click(function(){ 
      $("#mp4video").attr("src", "../vid/video1.mp4"); 
      $("#subtitle").remove(); 
      $("#videoclip").append("<track id='subtitle' src='../vid/subtitles/video1sub.vtt' kind='subtitles' srclang='en' 
      label='English'>"); 
      videoReloader(); 
     }); 
$("#video2").click(function(){ 
      $("#mp4video").attr("src", "../vid/video2.mp4"); 
      $("#subtitle").remove(); 
      $("#videoclip").append("<track id='subtitle' src='../vid/subtitles/video2sub.vtt' kind='subtitles' srclang='en' 
      label='English'>"); 
      videoReloader(); 
     }); 
$("#video3").click(function(){ 
      $("#mp4video").attr("src", "../vid/video3.mp4"); 
      $("#subtitle").remove(); 
      $("#videoclip").append("<track id='subtitle' src='../vid/subtitles/video3sub.vtt' kind='subtitles' srclang='en' 
      label='English'>"); 
      videoReloader(); 
     }); 
$("#video4").click(function(){ 
      $("#mp4video").attr("src", "../vid/video4.mp4"); 
      $("#subtitle").remove(); 
      $("#videoclip").append("<track id='subtitle' src='../vid/subtitles/video4sub.vtt' kind='subtitles' srclang='en' 
      label='English'>"); 
      videoReloader(); 
     });