0

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

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

我不是程序员，但我认为 javascript 可能会这样做。如果有更好的技术，请重定向我。我只是在寻找一种按我的意图工作的解决方案，但我没有 javascript 知识。不过，这肯定已经做过，所以我很乐意接受一个可行的解决方案。

4

1 回答 1

5

尽管您似乎正在走转换路线，但这是一个使用 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>
于 2012-08-03T14:02:23.333 回答