jquery - 删除以前播放的视频中重新出现的字幕

Question

我试图通过 jQuery 动态分配视频和字幕的链接。但是当我播放视频时，上一个视频的字幕会随着新视频的字幕一起出现。

html代码:

<video   controls   oncontextmenu="return false;" id="video" class="video"  >
                     <source src="#" type="video/mp4" id="abc"/>
                     <track  src="#" label="English" kind="subtitles" srclang="en-us" id="zxc">
                     Your browser does not support the video tag. I suggest you upgrade your browser.
                  </video>

jQuery:

$.get(c+'/count.txt', function(data) {

                 for(var i=1;i<=data;i++){
                    $('#myTable').append('<tr ><td class="abc" id="link'+i+'">Episode '+i+'<i class="fa fa-play right "></i></td></tr>');
                              }
               for(var j=1;j<=data;j++){
                   var id="#link"+j;

                    $(id).click(function(){


                      var cdo=$(this).text();

                        if(cdo.length==9){
                         var pp=cdo[0]+cdo[1]+"0"+cdo[8];
                           $("#epod").text(pp);
                        }

                        else{
                          var pp=cdo[0]+cdo[1]+cdo[8]+cdo[9];
                           $("#epod").text(pp);
                        }

                        var sg=$("#sr").text()+"/"+$("#son").text()+"/"+$(this).text()+".mp4";
                        var sb=$("#sr").text()+"/"+$("#son").text()+"/"+$(this).text()+".vtt";

                        $('#video').get(0).pause();
                        $('#abc').attr('src',sg);

                        $('#zxc').attr('src',sb);
                        $('#video').get(0).load();
                        $('#video').get(0).play();                     

                  });
                }

截图:First video played -Second video played with subtiles of previous ones too

Answer 1

我想如果您尝试以动态方式创建视频，问题就会解决

Working example

HTML 代码:

<div id="video-box"></div>
<button id="first">First</button>
<button id="second">Second</button>

JS代码:

// Add your javascript here
$(function(){
  var video1 = 'https://iandevlin.github.io/mdn/video-player-with-captions/video/sintel-short.mp4',
    video2 = 'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4',
    track1 = 'track1.vtt',
    track2 = 'track2.vtt';

  playVideo('video-box', video1, track1); 

  $('#first').on('click', function(){
    playVideo('video-box', video1, track1);
  });

  $('#second').on('click', function(){
     playVideo('video-box', video2, track2);
  });


  function playVideo(wrapperId, src, trackSrc) {
    var wrapper = document.getElementById(wrapperId);

    $('#video').remove();

    var video = document.createElement("video");
    video.id = "video";
    video.controls = "controls";
    video.class = "video";

    var source = document.createElement("source");
    source.src = src;
    source.type = "video/mp4";
    source.id = "abc";

    console.log(video, source, wrapper)

    video.appendChild(source);
    wrapper.appendChild(video);

    video.addEventListener("loadedmetadata", function() {    
      var track = document.createElement("track"); 
        track.kind = "captions"; 
        track.label = "English"; 
        track.default = "default";
        track.srclang = "en"; 
        track.src = trackSrc; 
        this.appendChild(track); 
    });

    video.load();
    video.play();
  }
});