видео в качестве фона - многократные изменения размера

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 (я хочу, чтобы он поддерживал пропорцию)

  • 0
    Что ты имеешь в виду под словом "это глючит"?
Теги:

1 ответ

1

возможно, событие изменения размера стреляет больше, чем вы хотите.

может быть ошибкой события изменения размера в некоторых браузерах, которые срабатывают несколько раз при перетаскивании:

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

вы можете попробовать polyfill для события изменения размера Paul Irish:

    (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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню