title: VideoJS: unable to switch the text track on run time
body: <p>In videojs, I want to change the text track from the drop down. When I select an option (say, Chinese), the subtitle will automatically be changed. Below is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" /&gt;
  
    &lt;!-- If you'd like to support IE8 (for Video.js versions prior to v7) --&gt;
    &lt;script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;style&gt;
  .video-js .vjs-control-bar {
    display: none;
  }
  &lt;/style&gt;
  
  &lt;body&gt;
  &lt;video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264"  poster="http://video-js.zencoder.com/oceans.png" controls="false" preload="auto" data-setup='[]'&gt;
    &lt;source src="//vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /&gt;
  
    &lt;track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' /&gt;
    &lt;track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' default /&gt;
    &lt;track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' /&gt;
    &lt;track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' /&gt;
    &lt;/video&gt;
  
    &lt;script src="https://vjs.zencdn.net/7.6.6/video.js"&gt;&lt;/script&gt;
  
    &lt;p&gt;&lt;select name="sel" id="sel"&gt;&lt;option value="en"&gt;English&lt;/option&gt;&lt;option value="zh"&gt;Chinese&lt;/option&gt;&lt;/select&gt;&lt;/p&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I read the post <a href="https://stackoverflow.com/questions/32947215/dynamically-change-videojs-captions-with-addtexttrack/33583372">Dynamically change videojs captions with addTextTrack()</a> however, unable to understand. I also gone through <a href="https://docs.videojs.com/tutorial-text-tracks.html" rel="nofollow noreferrer">https://docs.videojs.com/tutorial-text-tracks.html</a> but failed to understand how to achieve this.</p>
  
  <p>This is should be as like: <a href="http://dev3.indusnettechnologies.com/bamboo-tv/" rel="nofollow noreferrer">http://dev3.indusnettechnologies.com/bamboo-tv/</a></p>