Question

我有近500张图像，彼此之间略有不同。它们都是相同的大小。因此，当一个接一个地快速观看时，它们形成了一种视频。

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

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

Answer 1

虽然您似乎正在转换路线，但这里是一个使用javascript的解决方案，允许暂停，跳转到框架和更改速度（我没有打扰这个滑块[或任何一个很好的用户界面]它）：

<!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>

在时尚的视频中在浏览器中呈现多个图像

1 个答案: