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

Question

[Heretic Man]

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


UPD:
Либо как на клиенте взять видос и в цикле к примеру пробежаться чтобы на каждой секунде видео сделать скрин изображения и втыкать их где-то в DOMe?

Answer 1

[Alex]

Можно сделать так:

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;
}

Comments

[Heretic Man]

Круто а можете набросать контекст этого кода? как и где)

Answer 2

[Александр Аксентьев]

в html5 video

никак, это сервер отдаёт по запросу нужные кадры в виде картинки, а логика уже на ваше усмотрение заранее вы их будете генерировать или еще как-то.

Comments

[Heretic Man]

ок, а как тогда на клиенте взять видос и в цикле к примеру пробежаться чтобы на каждой секунде видео сделать скрин изображения и стопкой воткнуть их где-то в DOMe?

[Александр Аксентьев]

Heretic Man,
это конечно сделать можно jsfiddle.net/giu_do/e98tffu6

Но теперь вспоминаем что видео очень вероятно еще полностью не загружено браузером либо оно в принципе в формате стриминговом в виде мелких кусков так что нужного куска видео не будет в браузере даже в теории никогда для генерации картинки.

Answer 3

[zkrvndm]

Обратите внимание, что превью на прокрутке видно даже тогда, когда само видео ещё не загружано полностью... я думаю вы догадываетесь, что картинки генерируются отнюдь не в браузере?