Question

因此，我尝试实施基于页面滚动位置进行擦洗的视频。我在这里找到了一个设置：http://www.emergeinteractive.com/demos/javascript-video-scrubber/

基本上，视频被转换为图像序列，加载到图像阵列中，然后根据scrollTop的百分比更新图像标记的源（或在我的版本中为背景图像）。

这是一个基本的演示：https://room-dev-dxh.squarespace.com/home

js看起来像这样：

var step = 1; // visible frame
var targetStep = 1; // frame to animate to
var images = new Array; 
var totalFrames = 263; // the number of images in the sequence of JPEG files

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

function getYOffset() { // get distance scrolled from the top
    var pageY;
    if(typeof(window.pageYOffset)=='number') {
        pageY=window.pageYOffset;
    }else{
        pageY=document.documentElement.scrollTop; // IE
    }
    return pageY;
}

function pad(number, length) { // pad numbers with leading zeros for JPEG sequence file names
    var str = '' + number; while (str.length < length) { str = '0' + str; }     return str;
}

HTML看起来像这样：

<script type="text/javascript">
        <!--//

        totalFrames = 263; // the number of images in the sequence of JPEG files (this could be calculated server-side by scanning the frames folder)

        $(document).ready(function() {
            resizeAdjustments(); // adjust the size of video placeholder image to fit the screen and keep aspect ratio (zoom crop)
        });

        //-->
    </script>
</head>
<body onload="resizeAdjustments();" onresize="resizeAdjustments();" onorientationchange="resizeAdjustments();">

    <!-- placeholder image for video (required) -->
    <img id="video" src="/assets/frames/image_000000.jpg" alt="" />

    <!-- preload the video frames (required) -->
    <script type="text/javascript">
        <!--//
        // image filenames in frames folder should be "image_000000.jpg" through "image_000098.jpg"
        for(i = 0; i < totalFrames; i++) { // loop for each image in sequence
            images[i] =  new Image(); // add image object to array
            images[i].src = "/assets/frames/image_"+pad(i, 6)+".jpg"; // set the source of the image object
        }
        //-->
    </script>
</body>

目前这在Chrome和Safari中运行良好，但在Firefox 38 / Mac / PC中，它疯狂地闪烁。我已经阅读了很多关于Firefox重绘率，requestAnimationFrame，图像预加载，在FF上的SafeMode中打开的内容，但它是一个持久的小bug。所以我的两个主要问题是：

有没有办法修改当前代码以便在Firefox中更好地运行？
是否有另一种方法可以达到相同的效果，可能是通过擦除webm视频而不是jpeg序列？在没有滚动劫持页面的情况下，我一直在努力寻找其他人使用此功能的示例。

非常感谢！

Firefox中的JQuery视频擦除器闪烁

0 个答案: