Question

我有7张图像，每张图像有25帧。我需要做的是按帧在每个图像上徘徊，并将其显示为视频，并可以通过播放，暂停和停止按钮进行控制。

我能做的就是制作一个视频播放器，使我可以轻松导入视频并在其中播放，暂停和停止。我已经设计了它，但不知道如何从图像列表制作视频。

您可以在以下URL上查看图像：

-http://storage.googleapis.com/alyo/assignments/images/0.jpg -http://storage.googleapis.com/alyo/assignments/images/6.jpg

任何帮助将不胜感激。

Answer 1

您可以使用javscript setTimeout（）方法和div元素来实现它，

var left = 0;
            var top = 0;
            var minLeft = -512;
            var minBottom = -288;
            var xDecrement = 128;
            var yDecrement = 72;
            var myImage = document.getElementById("myImage");
            var imgIndex = 0;
            let imageList = ['http://storage.googleapis.com/alyo/assignments/images/0.jpg','http://storage.googleapis.com/alyo/assignments/images/6.jpg'];
            var playbackStates = {"INIT":0, "RUNNING": 1 , "PAUSE":2};
            var activeState = playbackStates.INIT;
    
            myImage.style.backgroundPositionX = "0px";
            myImage.style.backgroundPositionY = "0px";
            var timerHandler = null;
            var play = function(){
                
                if(timerHandler){
                    clearTimeout(timerHandler);
                    if(activeState === playbackStates.PAUSE){
                        return;
                    }
                }
    
                timerHandler = setTimeout(function(){
                    let pos =parseFloat(myImage.style.backgroundPositionX.replace("px",""));
                    myImage.style.backgroundPositionX = ( pos - xDecrement) + "px";  
                    if(pos <= -512){
                        myImage.style.backgroundPositionX ="0px";
                        pos =parseFloat(myImage.style.backgroundPositionY.replace("px",""));
                        myImage.style.backgroundPositionY = ( pos - yDecrement) + "px";
                        if(pos <= -288){
                            myImage.style.backgroundPositionY = "0px";
                            imgIndex ++;
                            if(imageList.length <= imgIndex) return;
                            myImage.style.backgroundImage = "url("+imageList[imgIndex]+")";
                        }
                    }
                    play();
                }, 160)
            
            };
            
            myImage.style.backgroundImage = "url("+imageList[imgIndex]+")";
            play();
            activeState = playbackStates.RUNNING;
            
            function pause(){
                activeState = playbackStates.PAUSE;
            }
    
            function resume(){
                activeState = playbackStates.RUNNING;
                play();
            }

<div style="width:128px;height:72px;" id="myImage"></div>
<input type="button" onclick="pause()" value="Pause"/>
<input type="button" onclick="resume()" value="Resume"/>

您可以在“ imageList”数组中添加所有图像URL，还可以通过修改超时间隔来调整速度。

使用Javascript将图像序列转换为视频

1 个答案: