Получить кадр video элемента в картинку

[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...

[SuperZen]

Дело было давно...

https://stackoverflow.com/questions/...and-javascript

[Arhitector]

Дело было давно...

https://stackoverflow.com/questions/...and-javascript

Да этот код я уже гуглил и пробовал этот пример, у меня не заработал.

Вот примерный мой код

//Создаю элементы по получаемым данным
for (var i = 0; i < elements.length; i++) {
	var element = document.createElement("video");
	element.src = elements[i].url;

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

var loadedData = function (e) {
	var canvas = document.createElement('canvas');
    canvas.width = 300;
    canvas.height = 300;

    var context = canvas.getContext('2d');
    context.drawImage(this, 0, 0, 300, 300); // this в данном случае это мой video

    var dataURL = canvas.toDataURL();
}

И мне прилетает вот такая вот ошибка

video-js.js:653 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at HTMLVideoElement.loadedData

Так что похоже не вариант... или может вы подскажите как это поправить?

[рони]

Arhitector,
на сервере код запускали?

[Arhitector]

на сервере код запускали?

Посмотрел сейчас на сервере, действительно ошибка исчезла, спасибо за совет!
Теперь новый момент, картинка вроде как есть, но фактически у меня это черный фон (как я понимаю это первый кадр видео). Есть ли возможность получить кадр из определенного отрезка времени? Допустим секунды с 10-20?

[рони]

Arhitector,
строка 15

this.currentTime = 15;

[SuperZen]

там вроде бы есть отдельная картинка для заставки видео...

[Arhitector]

this.currentTime = 15;

До этого пробовал этот код, не работало... и тут вдруг решил перенести реализацию из loadedData в timeUpdate...
внезапно всё встало на свои места
Спасибо.

[Arhitector]

там вроде бы есть отдельная картинка для заставки видео...

Если вы про poster то как по мне штука не очень удобная, мне больше нравится вариант когда всё это дело автоматизировано и кроме адреса видео файла мне не приходится делать лишних телодвижений