視頻作爲背景 - 多個調整大小錯誤

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