Контроль выбора эпизода , Замена времени выбора на картинку из медиа-файла

[cupoma58]

Есть рабочий медиа-плеер, под Chrome, с выбором времени просмотра:

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;
}

Хочу поменять таймер - на картинку-кадр, из видео-файла.
Через Canvas - не получается.
Где искать?

Сообщение отредактировано: cupoma58 - 28.08.24, 17:46

[cupoma58]

Получилось не очень но - работает:

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();  
});

Без canvas, как-то, обошлось.