Видео для фона сайта 1.x

+21
3.85K
Иллюстрация

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

Одним из трендов в строительстве сайтов в последнее время считается видео в высоком разрешении. Качественно снятый и смонтированный небольшой видео ролик способен зацепить клиента на сайте.

В интернете есть разные решения для вопроса. Чем наш instantcms хуже? Я взял готовое решение и адаптировал под instantcms 1.10.6 в виде модуля. Это позволяет выводить видео фоном не только на всех страницах, а только на главной или же в каком то разделе, в общем так как выводится любой модуль.

Установка стандартная.

—Залейте файлы из архива в корень сайта.
— Заходите в настройки модуля (нужно нажать на шестеренку), оптимальные настройки уже выставлены. Обязательно жмем кнопку "сохранить".
— Устанавливаете позиции вывода модуля.
— Снимите галочку отображать название модуля.
— Чтобы модуль не отображался укажите CSS префикс: v_fon_

Если у вас не дефолтный шаблон, то он должен быть обернут между <body></body> в <div id="wrapper">код шаблона</div> или изменить в файле Sayt.ru\templates\имя_шаблона\modules\mod_videofon.tpl значение #wrapper на #имя_вашего_дива (~7 сточка)

Скриншот админки:

Иллюстрация


Рекомендации

При установки видео в качестве фона желательно подготовить качественное видео, перекодировать его под нужное разрешение и не увлекаться длинными видео.



0
Sonat Sonat 6 лет назад #
Идея интересная, НО!
Мой браузер пока я смотрел страничку грузил проц на 100 процентов и отожрал память +300метров.
При просмотре самого Ютуба таких проблем не наблюдал scratch

Полагаю, что видео надо предварительно оптимизировать под такое дело,
да и не всем включать, а то зайдет человек с мобилки и нечаянно потратит весь свой месячный интернет лимит
0
Dost Dost 6 лет назад #
У меня на компьютере тратится ресурсов столько же сколько при просмотре видео с Ютуба.

Про оптимизацию видео я писал, естественно нужно уделить этому время, это самый тяжелый файл.

С другой стороны мощности компьютеров, скорости интернета растут, безлимитные тарифы доступнее.
На мобильном не возможно исчерпать свой трафик (1,5гига) так как скорости не позволяют. Видео просто не загрузится. У кого хорошая скорость, там скорее безлимитный пакет. Это все ИХМО.

Помимо всего скрипт по идее должен блокироваться при открытии мобильным устройством, В настройках js что то такое есть, ну я не понял пока.
+1
Джехутимери Джехутимери 6 лет назад #
Dost, после первой загрузки видео тяните его затем из кэша. Так час посидеть и оперативы не останется.
Чтобы не быть голословным - загляните в Network в инструментах разработчика.
0
Dost Dost 6 лет назад #
Да кто его будет час смотреть, это ж не кино. Это способ привлечь внимание при наличии качественного видеоролика. На каждый сайт такое не нужно и на всех страницах тоже.
0
Sonat Sonat 6 лет назад #
Джехутимери:
загляните в Network в инструментах разработчика.
Гляжу. Да, после того как загрузилось - второй и следующие круги идут из кэша.
Но:
Во-первых и начальная загрузка не малая - 20 метров на страницу
Во-вторых при возвращении на страницу второй раз видео уже не и кэша показывается, а опять грузится (
Спойлер
0
Dorimen Dorimen 6 лет назад #
Под 2.4.0 будет?
0
Dost Dost 6 лет назад #
Пока не планирую, с двойкой разбираться нужно.
0
Val Val 6 лет назад #
Если не ошибаюсь, это все можно через стили решить. Я к тому, что если нужно - добавляете пару строк HTML5 и CSS3 в свой шаблон и радуетесь))
0
GNabi GNabi 6 лет назад #
Dr.Web блокирует доступ на демо
0
Dost Dost 6 лет назад #
Спасибо, написал им. Кто им базы наполняет...Вирусов на демо сайте нет, я его пару часов назад установил.
0
Principal Principal 6 лет назад #
Что то у меня видео не отображается, все сделал по инструкции, что может быть? В какой позиции дефолтного шаблона отображать, чистить фон в своем CSS?
0
Principal Principal 6 лет назад #
все окей заработало smile Сорри...
0
Dost Dost 6 лет назад #
Никто больше не отписался устанавливал ли, тестил и или нет. Если все точно по инструкции должно работать.
0
Principal Principal 6 лет назад #
Спасибо вам огромное! Еще и все обернуто в модуль, просто супер! Немного пришлось внести изменений в верстку, ввести отдельный контейнер, что бы видео между блоками не показывалось, из за чего пришлось поправить верстку и других компонентов, но это все мелочи да и такое отображение на любителя smile

Еще по модулю как то бы видео зациклить более платно, какой может фейд эффект добавить в начало и в конец, но это по сути в самом видео можно сделать, но вот кога из 365 на каждый день smile Задержку поставил 0 и все равно сильно заметно, что ролик начался заново, даже который зациклен более менее качественно... Мерцание со временем начинает напрягать... Еще конечно верх красоты сделать так, что бы фронт, контент обновлялся а видео-фон как транслировался так и транслировался без перезагрузки страницы smile По развитию конечно индивидуально хотелось бы иметь возможность менять ролики по датам. У меня например городской портал и на НГ местная городская ёлочка зациклена, а в другие дни другие достопримечательности smile Еще раз спасибо!

Готов поучаствовать финансово :)
0
Principal Principal 6 лет назад #
От что выдает файрбаг

Код PHP:
  1. Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://www.youtube.com').
  2. chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js Failed to load resource: net::ERR_FAILED
  3. Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://www.youtube.com').
  4. chrome-extension://dliochdbjfkdbacpmhlcpmleaejidimm/cast_sender.js Failed to load resource: net::ERR_FAILED
  5. chrome-extension://fjhoaacokmgbjemoflkofnenfaiekifl/cast_sender.js Failed to load resource: net::ERR_FAILED
  6. Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://www.youtube.com').
  7. а эти ошибки выдаёт фаербаг при просмотре(
0
Dost Dost 6 лет назад #
Насколько я понял перевод английского эти ошибки показывает фаербаг из за соединения http вместо https. Связано с изменениями api Ютуба. Думаю это не фатально, но устранить пока не нашел решения.
0
Principal Principal 6 лет назад #
А что можно с нагрузкой сделать? Там не в оптимизации видео дело, кушает оперативу sad Например если включить сайт в двух вкладках то начинаются лаги жуткие... или например когда сайт сутки активен...
+1
Dost Dost 6 лет назад #
Честно говоря я не понимаю как с этим бороться и зачем. По идее видео отдается с Ютуба как обычно. Если пользователь откроет 2 вкладки то будет запущен еще один процесс на компе, не активная вкладка засыпает. Я открыл и дождался пока запустится видео у 10 вкладок. Самый емкий процесс 345кб (увеличивается с каждой вкладкой) Вот скрин:

Если комп старый, мало оперативки то естественно будет комп не справляется и тут дело не только в видео. И сайт тут ни при чем. Скорость интернета тоже влияет. Я глюков не замечаю, все ожидаемо... Сначала видео идет рывок, мне это не нравится, пробовал делать с плавным появлением видео, ну это 6 секунд получается. Маленький скачек при повторе тоже есть, не знаю как его убрать. Может я ожидаю чего то идеального, но так не будет все же сторонний сайт подключается. Можно видео со своего сервера показывать, но это уже другое решение, Мне хотелось сделать прокрутку с Ютуба.
0
Sonat Sonat 6 лет назад #
А как на счет скрина где видно плагин контейнер. Ведь у хрома это отдельный процесс.
0
Dost Dost 6 лет назад #
Что Вы хотите увидеть? На скрине самый емкий процесс, а всего их больше 40 было, точно не помню.
0
Александр Александр 6 лет назад #
Поставил плюс, эффект очень прикольный! уже вижу как в будущем это будет популярным брендированием для рекламодателей. Конечно пока еще рано, так как не у всех хорошие компы и интернет. Но мой комп вроде справился отлично)))
0
Ingvarruss Ingvarruss 6 лет назад #
Если у вас не дефолтный шаблон, то он должен быть обернут между <body></body> в <div id="wrapper">код шаблона</div> или изменить в файле Sayt.ru\templates\имя_шаблона\modules\mod_videofon.tpl значение #wrapper на #имя_вашего_дива (~7 сточка)

Вот с этим немного не понятно, что такое имя вашего дива?
0
Dost Dost 6 лет назад #
После тега body нужно добавить div id="wrapper", на котором и будет выводиться слой видео.
Или можно попробовать выводить видео на свой div, для этого нужно внести имя div вашего шаблона, который идет после body
0
Ingvarruss Ingvarruss 6 лет назад #
Спасибо, получилось.
0
Monsieur Monsieur 4 года назад #
Отличная штука!
Только не адаптирована под мобильные устройства, это печалит.

Еще от автора

Photomag 1.x
Теперь и для первой ветки!
Photomag  InstantCMS 2
Виджет Photomag Преимущества: Моментально выводит фотоальбом из группы vk, фото подгружаются из фотохостинга vk.
Видео для фона сайта 2.7.2
Модуль позволяет выводить любой ролик с Ютуба в качестве фона сайта, включать отключать звук, зацикливать прокрутку ролика, устанавливать время задерж
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.