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

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

Я делаю свой небольшой видео\аудио плеер на 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...

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

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,
на сервере код запускали?

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

Arhitector,
строка 15

this.currentTime = 15;

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

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

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