title: Remove all other 'vtt cues' from video tag
body: <p>I have a video tag in which I pass video data i.e <code>src</code> and <code>vtt</code> dynamically,  I want to keep vtt for the current video only, and remove all other <code>textTracks</code>.</p>
  
  <p>Right Now on switching the video, all vtt related to previously played videos start playing inside the video tag.</p>
  
  <p><em>vtt is subtitle</em></p>
  
  <pre><code>     function addVttInvideo(data) {
          // http://www.html5rocks.com/en/tutorials/track/basics/
          // https://www.iandevlin.com/blog/2015/02/javascript/dynamically-adding-text-tracks-to-html5-video
          var video = document.getElementById('videoSrc');
          var track = video.addTextTrack('subtitles', 'English', 'en');
          track.mode = "showing";
          var startTime = parse_timestamp(data.info.start);
          var endTime = parse_timestamp(data.info.end);
          var cue = new VTTCue(startTime, endTime, data.info.text);
  
          // track.addEventListener("cuechange", function () {
          //   // get current cue, and remove it if it's number 2
          //   var currentCue = track.activeCues[0];
          //   track.removeCue(currentCue)
          // },false);
          track.addCue(cue);
          // console.log('subtitle.innerHTML',subtitle.innerHTML);
          // quick_and_dirty_vtt_or_srt_parser(subtitle.innerHTML).map(function(cue) {
          //     track.addCue(cue);
          // });
          // track.addCue(quick_and_dirty_vtt_or_srt_parser(2,55,'my profile'));
  
  
        }
  
        function parse_timestamp(s) {
          var match = s.match(/^(?:([0-9]{2,}):)?([0-5][0-9]):([0-5][0-9][.,][0-9]{0,3})/);
          if (match == null) {
            throw 'Invalid timestamp format: ' + s;
          }
          var hours = parseInt(match[1] || "0", 10);
          var minutes = parseInt(match[2], 10);
          var seconds = parseFloat(match[3].replace(',', '.'));
          return seconds + 60 * minutes + 60 * 60 * hours;
        }
      } catch (e) {
        console.log('the exception album ' + e);
      }
  // load video is called when user swipe next and back
  function loadVideo(way) {
    var videoSrc = $('#videoSrc');
    if (way === 'prev') {
      videoCounter = videoCounter - 1;
      if (videoCounter &lt; 0) videoCounter = VideoData.length - 1;
      videoSrc.attr('src', VideoData[videoCounter].vurl);
      videoSrc.attr('poster', VideoData[videoCounter].turl)
      addVttInvideo(VideoData[videoCounter].vtt)
    } else if (way === 'next') {
      videoCounter = videoCounter + 1;
      if (videoCounter &gt; VideoData.length - 1) videoCounter = 0;
      videoSrc.attr('src', VideoData[videoCounter].vurl);
      videoSrc.attr('poster', VideoData[videoCounter].turl)
      addVttInvideo(VideoData[videoCounter].vtt)
    } else {
      videoSrc.attr('src', VideoData[0].vurl);
      videoSrc.attr('poster', VideoData[0].turl)
      addVttInvideo(VideoData[0].vtt)
      // document.getElementById('vsrc').onloadeddata = function() {
      //   debugger
      //
      // };
    }
    $("#videoAlbumCaption").text(videoCounter + 1 + " / " + VideoData.length);
  }
  </code></pre>