从视频标签中删除所有其他“vtt提示”

Question

我有我通过视频数据的视频标签，即src和vtt动态的，我想保持VTT只对本视频，并删除所有其他textTracks。

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

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 提示，但从您所描述的情况来看，是删除所有其他 textTracks。

\n\n

我将解释如何删除所有其他文本轨道。

\n\n

超文本标记语言

\n\n

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

\n\n

videoElement.text跟踪控制台输出

\n\n

var videoElement = document.querySelector("video");\nconsole.log(videoElement);\n\nTextTrackList {0: TextTrack, 1: TextTrack, length: 2, onchange: null, onaddtrack: null, onremovetrack: null}\n0: TextTrack {kind: "subtitles", label: "English subtitles", language: "en", id: "", mode: "showing", \xe2\x80\xa6}\n1: TextTrack {kind: "subtitles", label: "Deutsche Untertitel", language: "de", id: "", mode: "disabled", \xe2\x80\xa6}\nlength: 2\n

\n\n

删除曲目

\n\n

var videoElement = document.querySelector("video");\nvideoElement.removeChild(videoElement.children[0]); //remove English subtitle\n\n\n// you need iterlate videoElement.textTracks and find index according to language\nvar i =0;\nvar targetLanguage = "de";\nfor (let track of videoElement.textTracks){\n    if(track.language !== targetLanguage){\n        videoElement.removeChild(videoElement.children[i]);\n    }\n    i++;\n}\n\n

\n\n

正如 @Heretic Monkey 评论的那样，请参阅 TextTrackList 实现。\n从视频中删除 TextTrack

\n