Создание видео изображений в Javascript

Question

My Link

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

Использование цикла Javascript for Я пытаюсь создать видео по простому файлу в формате JPEG. Я не могу этого добиться, любая помощь будет оценена.

Вот мой код:

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 1

Вы должны добавить задержку перед отображением следующего изображения в противном случае вы будете видеть только один последний

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

Для бесконечного цикла, вы должны сбросить индекс до 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);