admin / 10.11.2018

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

.

HTML5 видео как фон страницы

event16 сентября 2014 в 14:35

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

1. Форматы видео

Как известно, браузеры разделились на 2 лагеря — те, которые поддерживают H.264, и те, которые выступают за открытые форматы вроде OGG/Theora и WebM. Соответственно, нужно хотябы 2 версии видео. В итоге я сделал видео в H.264 и видео в WebM. 

H.264 поддерживают на данный момент:

WebM поддерживают:

Что интересно, Firefox поддерживает H.264, но не под Mac OS X. В общем, 2 версии видео, обе указываем как src — и охватили все современные браузеры.

2.

15 сайтов с бесплатными фоновыми видео

HTML и CSS

Код видео:

И CSS:

Собственно, этим кодом всё и сказано — div #trailer растягиваем на весь экран, внутри него наше видео, у него аттрибут autoplay, значит оно стартует сразу, как браузер решит, что уже можно начать играть, т.к. стоит preload="auto".

Получаем такую картинку:

Видим чёрные полосы по краям. Можно ещё для #trailer > video поменять CSS, чтобы их не было:

Тогда мы получим видео на всю ширину:

Всё хорошо… Пока мы не изменим размер окна. Внезапно:

Тут нам на помощь приходят CSS Media Queries для управления пропорциями. Убираем добавленный на предыдущем шаге CSS-код и добавляем:

 

Это позволяет нам при разных размерах размерах окна/экрана центровать видео.

Ну вот, красота. Теперь главную часть, текст, увидят все.

3. Мобильные браузеры

С мобильными браузерами сложности. 

Internet Explorer на Windows Phone всё показывает и играет без нареканий, проигрывание стартует автоматически.

На iOS в Safari автопроигрывание отключено. Такая вот позиция Apple — чтобы батарейку не жрало. Поэтому там показывается видео со значком Play, на который надо нажать, после чего видео начинает играть на полный экран. 

С Android тяжелее всего. Автопроигрывание не работает. Кнопка Play появляется только если добавить для тэга video аттрибут controls, чтобы появились стандартные контролы управления. Это, увы, не так уже красиво. Но это ещё не всё. Для того, чтобы видео начало играть, нужно ещё добавить дополнительно Javascript-обработчик, который принудительно скажет video, чтобы оно играло:

Для определения Android, чтобы добавить аттрибут controls, я просто использовал Detect.js:

 

 

Кроме того, чтобы это работало на Android, нельзя использовать атрибут type внутри source.

Такие вот дела. Итог с прелоадером тут. Ну и пока что на dolphinmusic.ru тоже висит.

keyboard_returnback

Любой человек, который создал канал на Ютюбе задавался вопросом — «как изменить фон/шапку для YouTube канала»?

Многие люди по ошибке думают, что фон канала — это шапка (верхний графический элемент). На самом деле это не так.

Изменить фон для канала можно было на YouTube в 2011-2012 годах, когда дизайн данного сервиса выглядел иначе.

Вот пример дизайна того времени:

Обратите внимание на элементы справа и слева.

Где взять видео, для фона на сайте?

На заднем фоне раньше была возможность загрузить какую-либо фотографию и тем самым сделать уникальный дизайн для своего канала.

В 2013 году YouTube изменил полностью дизайн и эта функция стала недоступна. С 2013 года нельзя изменить фон для канала, из графических элементов можно изменить только:

  • Шапку
  • Значок канала (логотип канала)
  • Значок для видео (превью картинка — перед просмотров ролика)

Посмотрите на пример моего канала:

Здесь наглядно видно, что у меня отсутствует уникальный фон для канала. Серые поля по краям — это стандартная цветовая гамма на YouTube и её нельзя поменять.

Возможно, в будущем, появится возможность опять сменить дизайн фона, но в 2016 году такой возможности нет.

Многие люди также ищут фон для YouTube, чтобы сменить стандартную шапку канала. Для них я могу порекомендовать воспользоваться поиском картинок в Яндексе или Google.

Ключевой запрос для поиска «фон для ютюб»:

Там есть множество изображений, для установки красивого изображения Вам нужно выбрать картинку размером 2560х1400. Изображение этого размера идеально подходит для шапки YouTube канала.

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

Эта услуга под ключ стоит в среднем 2-3 тысячи рублей. Не дорого, зато канал будет выглядеть очень стильно!

 

 

Как сделать видео в качестве фона сайта на HTML5. (1/2).

Всем привет! В этой статье мы поговорим о том, как сделать видео в качестве заднего фона для вашего сайта на HTML5.

Итак, как всегда, начнем со структуры.

Думаю, тут все ясно.

HTML5 видео как фон страницы

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

Перейдем к стилям

Тут тоже нет ничего сверхестественного. Для видео мы задаем ширину и высоту по 100%, делаем выравнивание видео по правому нижнему краю и задаем свойство z-index отрицательным, чтобы текст и другие элементы могли отображаться поверх видео.

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

На этом я заканчиваю первую часть. Спасибо за внимание!

  • Создано 02.10.2014 20:14:54

  • Михаил Русаков

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так:

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

FILED UNDER : IT

Submit a Comment

Must be required * marked fields.

:*
:*