Html5 Generating Video From Images

i'm wondering, since HTML and with javascript are mesmerizing together, if there is a solution in HTML5 to generate a video-file from many images? For example, you're able to loa

Solution 1:

Here we go:

• Article: http://techslides.com/convert-images-to-video-with-javascript
• Demo: http://techslides.com/demos/image-video/create.html(select multiple images at once)
• Code: [just view the source]
• You can download .webm video file

@K3N answer mentions building an encoder. Luckily there is one - https://github.com/antimatter15/whammy - snippet from the article:

You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder.

Solution 2:

Hi I have built it using the code provided by tech-slides. Also I made a template application where you can take list of images and turn them into video format. You have to edit the code according to your own needs. It is only supported in chrome and YouTube though. So basically in whammy.js you turn the images into canvas in a JavaScript file then turn the canvas into video using whammy.js function. You need to set event listener and load the videos into video tag. Whammy.js only produce webp file. To turn it into mp4: Load it in YouTube then download it using YouTube as mp4. Hope it helps.