-
-
Save lisajamhoury/2e5f437992da2bcd97e2ef92d47e3b9a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let videoToImage = function (iSrc) { | |
let i = 0; | |
let video = document.createElement("video"); | |
let thumbs = []; | |
video.addEventListener('loadeddata', function() { | |
thumbs.innerHTML = ""; | |
video.currentTime = i; | |
}, false); | |
video.addEventListener('seeked', function() { | |
// now video has seeked and current frames will show | |
// at the time as we expect | |
this.generateThumbnail(i); | |
// when frame is captured, increase | |
i++; | |
// if we are not passed end, seek to next interval | |
if (i <= video.duration) { | |
// this will trigger another seeked event | |
video.currentTime = i; | |
} | |
else { | |
// DONE!, next action | |
console.log("done!") | |
return true, thumbs; | |
} | |
}, false); | |
video.preload = "auto"; | |
// video.src = "./assets/vid_white.webm"; | |
video.src = iSrc; | |
video.generateThumbnail = function() { | |
let c = document.createElement("canvas"); | |
let ctx = c.getContext("2d"); | |
c.width = this.videoWidth; | |
c.height = this.videoHeight; | |
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); | |
let img = new Image(); | |
img.src = c.toDataURL('image/webp'); | |
thumbs.push(img); | |
} | |
}; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment