视频作为背景 - 多个调整大小错误

Question

所以我有这个视频标签，位置固定的休闲视频标签，顶部和左侧设置为0px。

你可以在这里找到实例： http://stvdd.com/video/

我有这个小脚本：

$(document).ready(function() { 
     $('#bgvideo').on("loadedmetadata", scaleVid); 
      $(window).resize(function() { 
       scaleVid(); 
      }) 

      function scaleVid(){ 
       if($(window).width()/$(window).height() > 1.7777777){ 

        $('#bgvideo').css({ 
         'width':$(window).width() 
        }) 
       } 
       else 
        $('#bgvideo').css({ 
         'height':$(window).height() 
        }) 
      } 

     }); 

这里的问题：当我调整只是一次或两次，它的工作原理。但是，当我调整速度非常快，只是玩我的窗口大小，它错了。 的视频分辨率为16：9，因此1.77777（我希望它保持比例）

Answer 1

也许resize事件被解雇不是你想要更多..

可能是resize事件错误在一些浏览器将触发多次，而您拖动：

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

你可以尝试填充工具由保罗爱尔兰resize事件：

(function($,sr){ 

     // debouncing function from John Hann 
     // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ 
     var debounce = function (func, threshold, execAsap) { 
      var timeout; 

      return function debounced() { 
       var obj = this, args = arguments; 
       function delayed() { 
        if (!execAsap) 
         func.apply(obj, args); 
        timeout = null; 
       }; 

       if (timeout) 
        clearTimeout(timeout); 
       else if (execAsap) 
        func.apply(obj, args); 

       timeout = setTimeout(delayed, threshold || 100); 
      }; 
     } 
     // smartresize 
     jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; 

})(jQuery,'smartresize'); 

，然后用这样的：

// usage: 
$(window).smartresize(function(){ 
    // code goes here 
    scaleVid(); 
}); 

它的使用很好的演示：

http://www.paulirish.com/demo/resize