Как добавить временную шкалу в HTML5 видео с помощью JavaScript?

Question

Я пытаюсь создать простой видеоредактор, который содержит временную шкалу, временная линия будет содержать кнопку добавления, в которой пользователь может добавить кнопку к видео, что-то вроде этого ниже

Пока что я могу добавить такую ​​кнопку

<video id="v">...</div>
<div id="overlay" style="position: relative; top: -80px;">HELLO</div>

<script type="text/javascript">
    var overlay= document.getElementById('overlay');
    var video= document.getElementById('v');
    video.addEventListener('progress', function() {
        var show= video.currentTime>=1 && video.currentTime<2;
        overlay.style.visibility= show? 'visible' : 'hidden';
    }, false);
</script>

К сожалению, я хотел бы использовать фреймворк, библиотеку или плагин для решения моей проблемы.

Есть ли какие-либо рамки, которые я могу использовать для решения моей проблемы?