BigVideo.js: фоновое видео на весь экран



    Плагин BigVideo.js для jQuery добавляет на страницу видео в качестве фонового изображения через HTML5 Fullscreen API. Видео автоматически растягивается на любой размер экрана. Для работы нужно предварительно загрузить библиотеки jQuery, jQuery UI и jQuery imagesloaded. Запуск:

    $(function() {
        var BV = new $.BigVideo();
        BV.init();
        BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
    });

    В качестве хостинга своих видеороликов удобно использовать Vimeo Pro, он даёт прямую ссылку на mp4-файл и отгружает контент со скоростью более 10 Мбит/с.

    Можно запустить список из нескольких видеороликов в бесконечном цикле, как в этом примере. Конечно, нужно добавить кнопку, чтобы пользователь мог отключить воспроизведение видео.

    $(function() {
        var BV = new $.BigVideo();
        BV.init();
        BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
    });

    Поскольку на мобильных устройствах автоматическое воспроизведение видео запрещено, с помощью такого кода можно их распознавать и заменять фоновое видео на статическое фоновое изображение:

    var BV = new $.BigVideo();
    BV.init();
    if (Modernizr.touch) {
        BV.show('video-poster.jpg');
    } else {
        BV.show('video.mp4',{ambient:true});
    }

    Есть поддержка плейлистов с выбором в меню, какой видеоролик запустить.

    Коллекции бесплатных видеороликов, подходящих для фона.
    Support the author
    Share post

    Comments 47

      +2
      Будет бешено тормозить же.
      Ютуб в 360р адско тормозит, а фоном, да еще и на js — вообще слайдшоу будет. Смысл?
        +24
        У вас тормозит Youtube в 360p? Сочувствую! :)
          –4
          Наверное имеется ввиду в качестве фона.
            0
            Нет, просто видео. Интернет нормальный (100 мбит), но видео тормозит адско во всех браузерах и на обоих осях (w7, gentoo). Оффлайн в VLC нормально тянет 720p, но в браузере даже 360 лагает огого как.

            Ноутбук Acer aspire 5610.
              0
              Какой браузер?
                +2
                Будьте внимательнее.
                  0
                  Да, злой рок.
          +1
          А чем js плох? он не отрисовывает каждый кадр, а просто скармливает браузеру видео. Так что если и будет тормозить, то только из-за скорости
            +4
            «Не читал, но осуждаю», же
          +27
          Я проклинаю всех, кто ставит музыку фоном. А тут еще видео…
            +3
            В 99.99% случаев соглашусь. Тем не менее иногда видео и музыка к месту. Например RainyMood (звук и видео фоном).
              0
              Это исключение
                0
                И даже на нём у меня адски тормозит курсор… Что как бы намекает.
                  0
                  Что как бы намекает обновить/установить драйвер видеокарты
                    0
                    Да если бы. Драйвер нормальный, а вот видюха — встроенная (Intel HD Graphics 1000 (GT1)). Обычная офисная машинка.
                0
                Есть видеподкладки без звука.
                  0
                  есть большой контингент фото/видео/фэшн сайтов для которых такая функция необходима, и вы явно не их посетитель, так что, не берите в голову.
                  0
                  Явно не хватает прелоадера и картинки-заглушки, ну и кнопки «СТОП!» для пользователей.
                    0
                    Кнопка «стоп» таки есть — в меню выбрать «показать управление» (только в хроме, мб еще в ff)
                    +7
                    Как же хочется взять и уе…
                      –6
                      это же alizar. В своем стиле.
                        +1
                        Уже второй раз вижу, как саморегулирующееся сообщество яростно плюсует ничем не мотивируемую агрессию, выраженную таким нелицеприятным образом. И это меня удивляет.
                          0
                          Точно ли ничем не мотивированную? Видимо, вы не читали топик. И это не агрессия, это лишь выражение чувств.
                            0
                            На всякий случай перечитал топик. Да, определенно, ничем не мотивированная.
                              0
                              Криво написанный код, назначение которого раздражать посетителя сайта? Увольте. У меня только одно чувство по отношению к такому коду. Ну и к автору.
                                +3
                                Код плагина я не смотрел, т.к. нет необходимости в таких штуках. Но если каждый раз бить морду за кривой код, то все будем ходить с набитыми мордами. Плюс код выложен на гитхабе, значит, если у вас есть столько энергии, чтобы бить морду автору, вы могли бы просто внести несколько правок, ну или тикет написать и объяснить, где автор не прав.

                                Ну и про назначение. Сейчас html и js — это не только домашняя страничка Васи Пупкина. На них нередко делаются очень сложные приложения и игры, в которых, возможно, могут понадобится и такие эффекты.

                                Ну и в крайнем случае, вы могли написать самому автору с предложением набить ему морду. Вполне возможно, что он бы согласился с вами встретиться.
                        0
                        Порой единственный способ для меня посмотреть видео онлайн — это нажать play, потом поставить на паузу и дождаться полной загрузки.

                        Как проделать эту операцию с фоном?
                          0
                          Полагаю не использовать vimeo и прочее, а использовать фоновую подгрузку, а вначале показывать картинку (кадр первый).
                          Но это уже самому написать придётся, хотя и не проблема.
                          +6
                          На замену флеш банерам. приходят банеры на HTML5! Только хардкор!!! )))
                            0
                            Причем сразу на <video>, чтобы жизнь медом не казалась :)
                              0
                              ну не, хорошо хоть не трехменые баннеры на webgl
                            0
                            Девяностые снова в моде?
                              +3
                              ОМГ! Простите, но причём тут HTML5 Fullscreen API?

                              И вообще зачем этот плугин и зачем для такой задачи jQuery? Это делается несколькими строками pure js-кода. Если мы говорим про поддержку HTML5 video, то предполагается что браузер не IE8-. А если этот плугин делает что-то ещё, то вы явно забыли про это написать.

                              По моему, этот плагин не нужен.

                              В общем, подписываюсь под комментом Alinaki

                              P.S.
                              Поскольку на мобильных устройствах автоматическое воспроизведение видео запрещено… заменять… статическое фоновое изображение:… if (Modernizr.touch) ...
                              . *баный стыд. А что тогда делает плугин?
                              P.S.S. Плугин вроде бы детектит поддержку форматов видео и, вроде бы есть fallback на flash, но всё равно в браузерах без поддержки определённого формата видео (в данном случае mp4) мы видим простой чёрный вон.
                                +3
                                Более того, Modernizr.touch это не определение мобильного браузера, а возврат (не всегда точный) флага поддержки тач-жестов на устройстве/браузере. Плагин жесть, конечно. Три строки Vanilla JS, но кому он сейчас нужен — не модно…
                                0
                                Это сравнимо со знаменитыми кубиками Compizа, вах! — но не более… я с трудом вчитывался в текст :)
                                  +5
                                  Плюсую уважаемому Alinaki!
                                  jQ ну ладно допустим, скрипя сердцем он щас почти везде, но простите тянуть jQuery UI и jQuery imagesloaded ??? автор не знает js совсем? и лезет что-то писать?
                                  А вот так выглядит ваш сайт когджа жму скачать!

                                  А вообще я еще года 4 назад делал такое только не нативным видео о флешкой в бекграунде растянутой на весь экран и кстати было олично.

                                  Дорабатывайте плагин и избавьтесь от jQ и тонны плагинов они тут не нужны
                                    0
                                    пользуясь случаем — есть расширение для хрома чтобы тупо выключить звук в нем? А то в 1 из 100 вкладок какой нибудь Покер чувак начнет затирать про 100 долларов в день… ищи его через дерби
                                      +1
                                      Flash Block в большинстве случаев решает эту, и не только эту проблему.
                                        0
                                        Причем это даже не плагин, а встроенный в хром функционал. Искать в «настройки»-> «содержимое»
                                      0
                                      За всё время видел только одно полезное усовершенствование, связанное с <video> — превьюшки на capped.tv. (Обычное встраивание видеоплеера в расчёт не берём.)
                                        0
                                        Еще бы хорошо проверку скорости соединения написать какую-то, от которой бы зависело, что показывать и в каком качестве: видео или картинку. Также, однозначно, пользователя надо предупреждать о фоновой загрузке. Например, можно сделать анимированную favicon.
                                          +2
                                          Когда-то давно это решалось 1 строчкой:

                                          <img dynsrc="movie.mpg" style="position:absolute;top:0px;left:0px;width:100%;height:100%">
                                          

                                          С тех пор прошли годы, появились новые стандарты и кодеки. Казалось бы, прогресс идет вперед, но теперь для такой мелочи нужно уже подключать сторонние библиотеки.
                                            0
                                            Ой, z-index:-1; в стилях забыл
                                            0
                                            Для вау-эффекта сойдет где-нибудь. Хотя тоже не понимаю, зачем тут нужен jQuery UI.
                                              0
                                              jQuery UI только для прогресс бара? Ну ну…
                                                0
                                                nn.go2all.ru/2-zvezdy-avtozavodskaya.html


                                                Сейчас появляются и обычные компьютеры (например, планшеты) с поддержкой прикосновений и пера.
                                                  0
                                                  Прошу прощения, в буфере обмена мусор повис.

                                                  Имел в виду:

                                                  Modernizr.touch

                                                Only users with full accounts can post comments. Log in, please.