Dinesh Kanivu Dinesh Kanivu - 3 months ago 22
Javascript Question

Create Video by Images in Javascript

My Link

https://jsfiddle.net/dineshkanivu/6xs0rxjb/

Using a Javascript

for
loop I am trying to create a video by simple jpeg file.
I am not able to achieve this, any help will be appreciated.

Here is my code:

var Allimages = ["eardrum0", "eardrum1", "eardrum2", "eardrum3", "eardrum4"];
var canvas = document.getElementById("video");
var lengthofImages = Allimages.length-1;

function imageLoad() {

for (var i = 0; i <= lengthofImages; i++) {

canvas.style.background = "url(" + Allimages[i] + ".bmp)";

}

}

imageLoad();

Answer

You should add a delay before displaying the next image otherwise you will only see the last one

function showImagesLikeVideo(index) {
    if(index < Allimages.length) {
        canvas.style.background = "url(" + Allimages[index] + ".bmp)";
        //show next image with a timeout
        setTimeout(showImagesLikeVideo.bind(null, index + 1), 300);
    }
}

showImagesLikeVideo(0);

For an infinite loop, you should reset the index to 0

function showImagesLikeVideo(index) {
    index = index < Allimages.length ? index : 0;
    canvas.style.background = "url(" + Allimages[index] + ".bmp)";
    //show next image with a timeout
    setTimeout(showImagesLikeVideo.bind(null, index + 1), 300);
}

showImagesLikeVideo(0);
Comments