изменить язык субтитров видео динамически

Question

Я хочу динамически изменить язык видео субтитров.
Код ниже просто - не работает.

<video class='vtop' controls><source src='video/lorem.mp4' type='video/mp4'>
<track src="sub/enlorem.vtt" kind="subtitles" srclang="en" label="EN">
<track src="sub/yulorem.vtt" kind="subtitles" srclang="sr" label="YU" default>
</video>

<div class='vbtn' id='ensubs'>EN</div>
<div class='vbtn' id='yusubs'>YU</div>

js

$('#ensubs').on('click', function(){
    $('.vtop track').attr('default',false);
    $('.vtop track').eq(0).attr('default',true);
});

$('#yusubs').on('click', function(){
    $('.vtop track').attr('default',false);
    $('.vtop track').eq(1).attr('default',true);
});

Answer 1

После загрузки ваш элемент <video> будет обрабатывать воспроизводимые дорожки и не будет оглядываться на элементы <source>. Так что если вы хотите sh изменить активную дорожку, сделайте это из свойства .textTracks:

document.querySelectorAll( "button" ).forEach( el => el.onclick = switchVTT );

function switchVTT( e ){
  const required = e.target.dataset[ "lang" ];
  const video = document.getElementById( "video" );
  const tracks = [ ...video.textTracks ];
  const active = tracks.find( track => track.mode === "showing" );
  if( active ) {
    if( active.language === required ) {  // already active
      return;
    }
    active.mode = "disabled"; // disable previous active one    
  }   

  const targeted = tracks.find( track => track.language === required );
  if( targeted ) {
    targeted.mode = "showing";
  }

};


// just to make a VTT accessible in Snippet
document.querySelector("track[srclang='en']").src = makeTestVTTUrl( 35, "Some text" );
document.querySelector("track[srclang='kl']").src = makeTestVTTUrl( 35, "'op bIngDaq ghItlh leghlu'" );

function makeTestVTTUrl( duration, text = "" ) {
  let vttText = `WEBVTT`;
  for( let i=0; i<duration; i++ ) {
    const t1 = (i + '').padStart(2 , '0');
    const t2 = ((i+1) + '').padStart(2 , '0');
    vttText += `
      00:00:${t1}.000 --> 00:00:${t2}.000
      Test${i} ${text}`
  }
  const vttBlob = new Blob([vttText], {
    type: 'text/plain'
  });
  return URL.createObjectURL(vttBlob);
}

video { max-height: calc(100vh - 50px);  }
::cue { font-size: 20px }

<button data-lang="en">English</button>
<button data-lang="kl">Klingon</button>

<div>
  <video id="video" controls>
    <source src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm">
    <track default kind="captions" label="English" srclang="en"/>
    <track kind="captions" label="Klingon" srclang="kl"/>    
  </video>
</div>