Question

我正在寻找一种解决办法,即通过超文本5视频“scrub”。我已经发现了一个问题,即将开始撰写我自己的文件。但是,在这样做之前,我认为,首先管理《SO》会有一定意义。

在我们采取我的做法之前,我们看到:

http://www.koka.com/demo/bluebell_s10/site

当然,这个网站是用闪电建造的,但是一个例子,表明我想要使用超文本5。

我在录像标签上试验了 play(-1),没有大的uck。我怀疑这一点,因为编码(例如,第4号,第8号)更适合推进。

参看以下两种可能的办法:

制作两个录像,一个供前游乐,另一个用于后台游戏。这当然使任何不理想的视频数量增加一倍。
将录像分解成单个jpg栏,播放图像。这将意味着我没有道理,但在我的具体应用中,这不是一个问题。

我认为,第二种选择最适合我的具体应用,并允许在回击方面有一定的灵活性。你认为什么?

Answer 1

Generate a bunch of thumbnails of your video by any means. Once you have all of your thumbs from the video, you could use something like this, which detects mouse movement and replaces the thumbnail based on the movement -- hover scrubbing.

例1:

例2:

如果你想把所有th形图象带入一个间隙,那么你就可以使用这个更可喜的 h。

http://jsfiddle.net/simsketch/r6wz0nz6/152/

但你需要将活动与<代码>Mousedown而不是mousemove挂钩。

this doesn t really give you the desired effect so you would need to combine mousedown and mousemove as is suggested here: https://stackoverflow.com/a/1572688/1579789

这将给你带来一些影响,但是没有使用超文本5录像,也没有声音。

然而,如果你把运动与声道ippose的时标挂钩,你也会增加声音。此时此刻,你可能很容易操纵录像。

Answer 2

i 认为你想要做什么,可在popynajs.org上查阅。

Answer 3

我今天在

我从未看到过一个录像带,被炸!

www.un.org/Depts/DGACM/index_spanish.htm 然后,我发现。 https://www.ejointinteractive.com/demos/javascript-video-scrubber/,其中说明如何实现。

这些民间人士可能在几年前为尼基发明了这一概念。

它们提供一条码和与Github :

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame    || 
    window.oRequestAnimationFrame      ||  
    window.msRequestAnimationFrame     || 
    function( callback ){
        window.setTimeout(callback, 1000 / 60);
    };
})();

(function animloop(){
    requestAnimFrame(animloop);
    targetStep = Math.max( Math.round( getYOffset() / 30 ) , 1 ); // what frame to animate to
    if(targetStep != step ) { step += (targetStep - step) / 5; } // increment the step until we arrive at the target step
    changeFrame();
})();

function changeFrame() {
    var thisStep = Math.round(step); // calculate the frame number
    if(images.length > 0 && images[thisStep]) { // if the image exists in the array
        if(images[thisStep].complete) { // if the image is downloaded and ready
            $( #video ).attr( src ,images[thisStep].src); // change the source of our placeholder image
        }
    }
}

友情链接