Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2018, 18:13
Интересующийся
Отправить личное сообщение для Arhitector Посмотреть профиль Найти все сообщения от Arhitector
 
Регистрация: 12.08.2018
Сообщений: 18

Получить кадр 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...
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2018, 19:55
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

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

https://stackoverflow.com/questions/...and-javascript
Ответить с цитированием
  #3 (permalink)  
Старый 08.10.2018, 20:50
Интересующийся
Отправить личное сообщение для Arhitector Посмотреть профиль Найти все сообщения от Arhitector
 
Регистрация: 12.08.2018
Сообщений: 18

Сообщение от SuperZen Посмотреть сообщение
Дело было давно...

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


Так что похоже не вариант... или может вы подскажите как это поправить?
Ответить с цитированием
  #4 (permalink)  
Старый 08.10.2018, 21:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Arhitector,
на сервере код запускали?
Ответить с цитированием
  #5 (permalink)  
Старый 08.10.2018, 21:45
Интересующийся
Отправить личное сообщение для Arhitector Посмотреть профиль Найти все сообщения от Arhitector
 
Регистрация: 12.08.2018
Сообщений: 18

Сообщение от рони
на сервере код запускали?
Посмотрел сейчас на сервере, действительно ошибка исчезла, спасибо за совет!
Теперь новый момент, картинка вроде как есть, но фактически у меня это черный фон (как я понимаю это первый кадр видео). Есть ли возможность получить кадр из определенного отрезка времени? Допустим секунды с 10-20?
Ответить с цитированием
  #6 (permalink)  
Старый 08.10.2018, 21:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Arhitector,
строка 15
this.currentTime = 15;
Ответить с цитированием
  #7 (permalink)  
Старый 08.10.2018, 21:59
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

там вроде бы есть отдельная картинка для заставки видео...
Ответить с цитированием
  #8 (permalink)  
Старый 08.10.2018, 22:07
Интересующийся
Отправить личное сообщение для Arhitector Посмотреть профиль Найти все сообщения от Arhitector
 
Регистрация: 12.08.2018
Сообщений: 18

Сообщение от рони Посмотреть сообщение
Arhitector,
строка 15
this.currentTime = 15;
До этого пробовал этот код, не работало... и тут вдруг решил перенести реализацию из loadedData в timeUpdate...
внезапно всё встало на свои места
Спасибо.
Ответить с цитированием
  #9 (permalink)  
Старый 08.10.2018, 22:08
Интересующийся
Отправить личное сообщение для Arhitector Посмотреть профиль Найти все сообщения от Arhitector
 
Регистрация: 12.08.2018
Сообщений: 18

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить значение font-size элемента из css allasan Общие вопросы Javascript 8 18.08.2016 16:53
Не удается получить значение элемента таблицы при клике на соседнюю ячейку yakim Элементы интерфейса 5 07.04.2016 14:06
Получить картинку из iframe guru_nemo Общие вопросы Javascript 1 07.10.2015 19:15
Как получить ID брошенного элемента методом drop? evgenyan jQuery 6 11.10.2010 14:22
Получить id элемента, вызвавшего событие. Mutagena jQuery 2 19.03.2010 10:16