HTML5 video player работа с субтитрами

https://i.stack.imgur.com/NqoY7.gif пробую создать свой плеер с интерактивными субтитрами, подскажите как можно реализовать данную идею, на данный момент у меня есть видео и файл с субтитрами к нему, они воспроизводятся и субтитры отображаются корректно и есть событие по которому я получаю содержимое объекра дочернего тега track. Мне бы хотелось создать что то похожее на плеер как на сайте https://english-films.co, но ничего полезного по работе с субтитрами и реализации интерактивных субтитров я найти не могу, если кто то сталкивался подскажите что почитать, и как примерно можно реализовать.

JS

window.onload = function(){

let track = document.getElementById('track');

track.oncuechange = (event) => {
      console.log(event.target.track.activeCues[0].text);        
  };

};

HTML

 <video id="video" width="500" height="400" controls>
  <source src="./[Can] Can I read that book - Exciting song - Sing along.mp4" 
       crossorigin="anomymous">
  <track class="hidden" id="track" kind="subtitles" src="./sub.vtt" srclang="en" label="English" 
  default>
  Тег video не поддерживается вашим браузером.
</video>