JS: массив видео-кадров mp4-файла

Вопрос-ответ JavaScript
1

Привет. Есть рабочий плеер, на базе <video>. При click, по прогресс-бару (pb), на мониторе возникает изображение-кадр, примерно - соответствующее выбранному (choos) моменту времени:

pb.addEventListener('click', (e) => {
    choos.style.width = (e.offsetX * 100) / pb.offsetWidth  + '%';    
    video.currentTime = (video.duration * e.offsetX) / pb.offsetWidth;                      
});

Изображение-кадр, формируется (кодировка по заданному типу) задействованным браузером.
Существует механизм визуализации выбора, в “окошке” (tt), с определёнными параметрами:

pb.addEventListener('mousemove', (e) => {  
   var skt = (video.duration * e.offsetX) / pb.offsetWidth;    
   tt.innerHTML = setTime(skt);
   var rect = vp.getBoundingClientRect();                 
   tt.style.left = `${e.pageX - rect.left}px`; 
});

В данном случае - это время выбора, в заданном формате.
Я пытаюсь заменить время, в tt-окошке, на изображение-кадр, приблизительно - соответствующее выбранному (choos) моменту времени.
Общее, примерное, количество кадров (okk), в mp4-файле

var okk = new Array();
okk = 24 * video.duration;

Номер кадра в массиве:

num = 24 * Math.max(0, video.currentTime - 1) + 1;

Получаем массив, с шагом 1/24 сек.
Быстрее всего - этого времени, браузеру, будет недостаточно для пере-кодировки.
Приемлемо, если он будет обрабатывать каждый, 24-й кадр - из массива, ещё не просмотренных, реагируя на событие mousemove. По крайней мере - через click он, с этим, вполне справляется.
Как объяснить, это, браузеру?

2

Ключевой вопрос не понятен. Я его сформулирую как понял, и отвечу на него. Поправь-дополни.

Bот этой части я не понял.

Получаем массив, с шагом 1/24 сек.
Быстрее всего - этого времени, браузеру, будет недостаточно для пере-кодировки.
Приемлемо, если он будет обрабатывать каждый, 24-й кадр - из массива, ещё не просмотренных, реагируя на событие mousemove.

Ты думаешь заранее сгенерировать превьюшки для каждой секунды и показывать их?

–

Задача, как я понял, - показывать кадр соответствующий позиции мышки над индикатором прогресса видео.

Некоторое ковыряние в теме говорит что в общем виде подход выглядит так:

// video - ссылка на узел видео который играет то самое видео.

// Запоминаем прогресс текущего видео
const currentTime = video.currentTime;

// Быстренько, синхронно ставишь время текущего видео в момент соответствующий hover-у мышки.
video.currentTime = time;

// Отрисовываем кадр соответствующий положению мышки
canvas.drawImage(video, 0, 0, previewCanvas.width, previewCanvas.height);

// Восстанавливаем время в узле видео. Так как весь код синхронный, то пользователь максимум увидит "подтормаживание" кадров
video.currentTime = currentTime;

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

Механизм выше будет создавать превьюшки только тогда когда они нужны и имеет потенциал для оптимизиации если браузер не будет справляться с обработкой такого кода “влет”.

3

Именно - “превьюшки” (через mousemove), с шагом в 1 сек.
Пробовал через setInterval - браузер справляется.
Будем пробовать.

4

Ну, throttle компактнее setInterval но, возвращаясь к основному вопросу - остаётся непонятен процесс добавления “превьюшки” на canvas, именно - через mousemove:

tt.innerHTML = setTime(skt); 

canvas.metod? = metod?(skt);

Браузер создаёт картинку, по click, а на mousemuve - не реагирует. Можно отсканировать кадры, через 1 сек., и подключить через vtt-файл но - это не вариант.

5

Если поставить в обработчик mousemove просто console.log, то этот лог виден?

Судя по описанию проблемы дело в самом обработчике (может событие не выстреливает, может обработчик не там где думаешь итд)

6

Предположим:

function getImg() {
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);	
}

Единственный способ добавления изображения, на холст:

canvas.drawImage();

Получается:

pb.addEventListener('mousemove', (e) => {
	var skt = (e.offsetX * video.duration) / pb.offsetWidth;
	    rect = video.getBoundingClientRect();    
    canvas.drawImage = getImg(skt);	
	var rect = video.getBoundingClientRect();	
	canvas.style.left = `${e.pageX - rect.left}px`; 
});

Ничего не получается.
Если задействовать Frame - получится картинка-в-картинке.

7

Вот это подозрительный кусок.

canvas.drawImage - такого метода у канваса нет. Он есть у контекста, как выше написано: canvas.getContext('2d').drawImage.