0

所以我有这个视频标签，位置固定的休闲视频标签，顶部和左侧设置为 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（我希望它保持比例）

4

1 回答 1

1

也许resize 事件触发的次数超出了您的预期..

可能是某些浏览器中的调整大小事件错误，在您拖动时会触发多次：

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

你可以为 Paul Irish 的 resize 事件尝试一个 polyfill：

    (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

于 2013-11-14T15:30:00.127 回答