Home/ Questions/Q 8355063
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T09:44:50+00:00

I have approximatively 500 images that differ very slightly one from another. They are

  • 0

I have approximatively 500 images that differ very slightly one from another. They are all of the same size. They hence form a sort of video when watched one after the other very fast.

I am looking for a way to display them in a browser (html file from disk), all in the same spot, to form that video looking effect. I want to be able to play, pause, stop, play faster, play slower (and if possible even more controls, such as maybe go to specific time (ie, image 47, if there’s a slider for example; if there’s only play,pause,fast and slow it’s okay though).

I am not a programmer but I think javascript might do that. If there’s a better technology, please redirect me to it. I’m just looking for a solution that works the way I intend, but I have no javascript knowledge. This surely has been done before though, so I would gladly accept a working solution.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Although you seem to be going the conversion route, here is a solution that uses javascript, allows pausing, jump to frame, and changing speed (I didn’t bother with a slider for this [or a nice UI for any of it]):

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body onload="launch()">
</body>
<script>
var frames=['frame1.png','frame2.png','frame3.png','frame4.png','frame5.png','frame6.png','frame7.png','frame8.png','frame9.png','frame10.png'];
var playing=true;
var on_frame=0;
var timer;

function launch(){
    document.body.innerHTML='<img id="film" src="frames/'+frames[on_frame]+'"/><br/><button id="actionbutton">Play</button><button onclick="stop()">Stop</button><br/>Milliseconds between frames:<input type="text" id="framerate" value="50"/><br/>Go to frame:<input type="text" id="gotoframe"><button onclick="goFrame(document.getElementById(\'gotoframe\').value);">Go</button>';   
    document.getElementById('actionbutton').addEventListener('click',play); 
    play();
}

function change(){
    document.getElementById('film').src='frames/'+frames[on_frame]; //I have my images in a folder named frames
    on_frame++;
    if(on_frame==frames.length){on_frame=0;}
    if(playing){
        timer=setTimeout(change,document.getElementById('framerate').value?document.getElementById('framerate').value:50);
    }
}

function play(){
    document.getElementById('actionbutton').removeEventListener('click',play);
    document.getElementById('actionbutton').addEventListener('click',pause);
    document.getElementById('actionbutton').innerHTML='Pause';
    clearInterval(timer);
    playing=true;
    change();
}

function pause(){
    document.getElementById('actionbutton').removeEventListener('click',pause);
    document.getElementById('actionbutton').addEventListener('click',play);
    document.getElementById('actionbutton').innerHTML='Play'; 
    playing=false; 

}

function stop(){
    document.getElementById('actionbutton').removeEventListener('click',pause);
    document.getElementById('actionbutton').addEventListener('click',play);
    document.getElementById('actionbutton').innerHTML='Play'; 
    playing=false; 
    on_frame=0;
}

function goFrame(x){
    if((x>-1)&&(x<=frames.length)){
        on_frame=x;
        if(!playing){document.getElementById('film').src='frames/'+frames[on_frame];}
    }
    else{
        alert('Out of range');
    }
}
</script>
</html>
    • 0