以类似视频的方式在浏览器中渲染多个图像

rendering multiple images in a browser in a video like fashion

本文关键字：图像 浏览器 视频 方式      更新时间：2023-09-26

我有大约500张图像，它们之间的差异非常小。它们的大小都一样。因此，当一个接一个地快速观看时，它们形成了一种视频。

我正在寻找一种在浏览器中显示它们的方法（来自磁盘的html文件），所有这些都在同一个位置，以形成视频效果。我希望能够播放、暂停、停止、播放得更快、播放得更慢（如果可能的话，还可以进行更多的控制，比如去特定的时间（例如，图像47，如果有滑块的话；如果只有播放、暂停，快速和慢速都可以）。

我不是程序员，但我认为javascript可能会做到这一点。如果有更好的技术，请将我重定向到它。我只是在寻找一个按我的意愿工作的解决方案，但我不知道javascript。这肯定是以前做过的，所以我很乐意接受一个可行的解决方案。

尽管您似乎正在走转换路线，但这里有一个使用javascript的解决方案，允许暂停、跳转到帧和更改速度（我没有为此使用滑块[或为任何一个提供漂亮的UI]）：

<!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>
相关文章：