javascript - 从视频标签中删除所有其他 'vtt cues'

Question

我有一个视频标签，我在其中动态传递视频数据，即 src 和 vtt，我只想为当前视频保留 vtt，并删除所有其他 textTracks.

现在切换视频时，与之前播放的视频相关的所有 vtt 开始在视频标签内播放。

vtt 是副标题

     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 < 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 > 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);
}

Answer 1

有点困惑，因为您的问题是删除 vtt 提示，但从您描述的内容来看，是删除所有其他 textTrack。

我将解释如何删除所有其他 textTrack。

HTML

<video src="foo.ogv">
    <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default>
    </track>
    <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de">
    </track>
</video>

videoElement.textTracks 控制台输出

var videoElement = document.querySelector("video");
console.log(videoElement);

TextTrackList {0: TextTrack, 1: TextTrack, length: 2, onchange: null, onaddtrack: null, onremovetrack: null}
0: TextTrack {kind: "subtitles", label: "English subtitles", language: "en", id: "", mode: "showing", …}
1: TextTrack {kind: "subtitles", label: "Deutsche Untertitel", language: "de", id: "", mode: "disabled", …}
length: 2

删除轨道

var videoElement = document.querySelector("video");
videoElement.removeChild(videoElement.children[0]); //remove English subtitle


// you need iterlate videoElement.textTracks and find index according to language
var i =0;
var targetLanguage = "de";
for (let track of videoElement.textTracks){
    if(track.language !== targetLanguage){
        videoElement.removeChild(videoElement.children[i]);
    }
    i++;
}

正如@Heretic Monkey评论的，TextTrackList的实现请引用这篇。 Delete a TextTrack from a video