Автоматические миниатюры / скриншоты для главы в видео HTML

Question

Я нашел несколько примеров, когда люди использовали canvas и javascript, чтобы сделать несколько скриншотов работающего видео. Вы можете увидеть эти примеры здесь или здесь.

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

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

Я знаю, что можно использовать предварительно сделанные снимки экрана для глав, но я хотел автоматизировать этот процесс.

Заранее спасибо за ваши ответы.

Answer 1

Теоретически это можно сделать, перейдя к определенному времени в видео (скажем, каждые 10 секунд), используя video.currentTimeв ожидании доступности кадра (используя progress события), рисование рамки на холсте (canvas.drawImage) и хранить его каким-либо образом (скажем, массив изображений, имеющих image.src = canvas.toDataURL).

Однако этот процесс займет время, потому что по крайней мере соответствующие части видео должны быть загружены в браузер, чтобы кадр мог быть захвачен. Видео не будет воспроизводиться во время процесса, так как оно пропускается в разные кадры.

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