progres.addEventListener('mousemove', (e) => {

    if (video.paused || video.ended) {                    // условия пред-просмотра

    progres.focus();    

        var rect = progres.getBoundingClientRect(),

            posX = e.clientX - rect.left,                  

            perc = posX / rect.width,                      

            time = perc * video.duration;                    

        if (isFinite(time) && !isNaN(time) && time >= 0)) {

            video.currentTime = time;                          

    }

    }

});

 

progres.addEventListener('click', () => {

    video.play();  

});

choise.addEventListener('mousemove', (e) => {

    var skipTo = Math.round((e.offsetX / e.target.clientWidth) * parseInt(e.target.getAttribute('max'), 10));

    choise.setAttribute('data-seek', skipTo);

 

    choiseBar.innerHTML = setTime(skipTo);  // таймер, в окошке

    //choiseBar.getContext('2d').drawImage(video,0,0,80,45) // это - не то (если <canvas id="choise-bar"...)

 

    var rect = video.getBoundingClientRect();

    choiseBar.style.left = `${e.pageX - rect.left}px`;

});

.choise-bar{

    position: absolute;

    bottom: 10px;

    margin-left: -60px;

 

      display: none;                        

      content: attr(data-title);

      width: 80px;

      height: 45px;

      border: 1px solid #646464;

 

            

      font-size:11px;  

      padding:3px;

      color:#ffb90f;

    background: transparent;

}