Отслеживание точки выбора

[cupoma58]

Привет.
Существует контроль точки выбора эпизода:

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);   // как добавить, сюда, картинку?

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

Это - не картинка-в-картинке (PIP), это - изображение на определённый момент.
Подскажите, хотя-бы - в каком направлении копать?

[ADSoft]

в нужном....
особенно учитывая что код функции setTime() не предоставлен
в целом - функция setTime должна отдавать html с картинкой
что-то типа

function setTime(a){
 return '<img src="path/image/img.png">';
}

[cupoma58]

Сообщение от ADSoft

должна отдавать html с картинкой

Понятно. Но, это не картинка с фиксированным адресом, это - картинка из видео-файла, на момент выбора. А функция - стандартная:

function setTime(time) {
    var h = parseInt(time / 3600), m = parseInt((time % 3600) / 60), s = parseInt((time % 3600) % 60);
    if (h < 10){h = '0' + h} if (m < 10){m = '0' + m} if (s < 10){s = '0' + s}
    return h + ':' + m + ':' + s;
}

[ADSoft]

от нас то чего хотите? Адекватно вопрос сформулируйте...
- как из конкретного видеофайла сохранить скриншот определенного момента времени? Или чето?

если как я написал - юзайте ffmpeg
Если из воспроизводимого на данный момент видео - смотрите - методы работы с видео, чето-там video.***

[cupoma58]

Сообщение от ADSoft

как из конкретного видеофайла сохранить скриншот определенного момента времени

Именно!
Мне не нужен готовый ответ. Просто - направление поиска.

Сообщение от ADSoft

смотрите - методы работы с видео

Уже смотрел. Даже - несколько библиотек перебрал. Такое впечатление, что это - не JS-решение.

[ADSoft]

первый же запрос в Яндеске "js video получить текущий кадр" дает результаты

function captureVideo(video) {
    var canvas = document.createElement("canvas");
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    var canvasContext = canvas.getContext("2d");
    canvasContext.drawImage(video, 0, 0);
    return canvas.toDataURL('image/png');
}

установка в определенное время - video.currentTime = n

[cupoma58]

Сообщение от ADSoft

первый же запрос в Яндеске

Через Canvas - не получается.

[ADSoft]

делать до тех пор - пока не получится..
сами же говорите - не нужен готовый ответ...
а направление - более чем задали

[cupoma58]

Сообщение от ADSoft

более чем задали

Тупичёк, там, да-а...

[cupoma58]

Сообщение от ADSoft

первый же запрос в Яндеске "js video получить текущий кадр" дает результаты

Это - не функция, это набор переменных, размазанных тонким слоем. К тому-же - абсолютно не наблюдается событие mousemove. Объяснить бро, что это холст, можно и так:

 
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

только он - выдаст картинку на click-событие. На mousemove - он не реагирует. Возможно - не успевает с кодировкой. Через массив кадров - то-же не получается.