heretic_man
@heretic_man
frontender который хочет знать все

Как в html5 video — получить скриншот изображения по определенному тайм коду?

Типо как в ютубе при наведении на полосу перемотки всплывает тултип с изображением на данном таймкоде.
Как реализовать похожее?
5e5e73cf16b66934412628.png

UPD:
Либо как на клиенте взять видос и в цикле к примеру пробежаться чтобы на каждой секунде видео сделать скрин изображения и втыкать их где-то в DOMe?
  • Вопрос задан
  • 62 просмотра
Решения вопроса 3
Kozack
@Kozack Куратор тега JavaScript
Можно сделать так:
function getVideoImage(path, secs, callback) {
  var me = this
  var video = document.createElement('video');
  
  video.onloadedmetadata = function() {
    if ('function' === typeof secs) {
      secs = secs(this.duration);
    }
    this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
  };
  video.onseeked = function(e) {
    var canvas = document.createElement('canvas');
    canvas.height = video.videoHeight;
    canvas.width = video.videoWidth;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    var img = new Image();
    img.src = canvas.toDataURL();
    callback.call(me, img, this.currentTime, e);
  };
  video.onerror = function(e) {
    callback.call(me, undefined, undefined, e);
  };
  video.src = path;
}
Ответ написан
Sanasol
@Sanasol Куратор тега JavaScript
нельзя просто так взять и загуглить ошибку
в html5 video

никак, это сервер отдаёт по запросу нужные кадры в виде картинки, а логика уже на ваше усмотрение заранее вы их будете генерировать или еще как-то.
Ответ написан
@zkrvndm
Веб-разработчик
Обратите внимание, что превью на прокрутке видно даже тогда, когда само видео ещё не загружано полностью... я думаю вы догадываетесь, что картинки генерируются отнюдь не в браузере?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
eGamings Воронеж
от 80 000 до 110 000 ₽
Aviakassa.ru Севастополь
от 80 000 до 200 000 ₽
ЧИТАЙ-ГОРОД Москва
от 100 000 до 140 000 ₽
02 апр. 2020, в 16:57
5000 руб./за проект
02 апр. 2020, в 16:49
15000 руб./за проект