[Arhitector]

Всем привет.
Очень нужна помощь, пытался решить проблему сам, увы не получилось.

Я делаю свой небольшой видео\аудио плеер на JS.
У меня есть основное окно где собственно и будет отображаться видео, и список из других видео на выбор.
Разметка следующая (для наглядности)

<div class="video media">
	<div class="video__wrapper-screen">
		<video src="video/my-video.mp4"></video> <!-- окно для отображения видео -->
	</div>
	<div class="video__wrapper-controller"> <!-- панель управления -->
              ......
	</div>

	<div class="video__wrapper-video-list"> <!-- список всех видео -->
		<div class="video__item-list">
			<div class="video__item-title">video 1</div>
			<div class="video__item-time">00:00</div>
            <img src="video-frame.jpg"> <!-- тут кадр -->
		</div>
		<div class="video__item-list">
			<div class="video__item-title">video 2</div>
			<div class="video__item-time">00:00</div>
            <img src="video-frame.jpg"> 
		</div>
		.......
	</div>
</div>

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

element.addEventListener("loadeddata", loadedData);
element.addEventListener("timeupdate", timeUpdate);
element.addEventListener("ended", timeEnded);

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

Можно ли это вообще реализовать? Сразу добавлю, никаких библиотек, плагинов и тд, только на ванильном JS...