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

Звидео как фон сайтаачем нам видео как фон сайта? Вся работа с сайтом сводиться к тому, чтобы привлечь как можно больше посетителей, привлечь внимание. Спора нет что видео на данный момент все больше и больше захватывает внимания и стоит номером один. При условии, что оно качественное и не напрягает.
Использование видео фона для сайта дает как преимущества, так и минусы:

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

Я в данной статье буду говорить об использовании в открытках. Уже многие используют данный метод, но затрачивают определенную сумму за приобретение. Благодарю Черникова Дениса ( блог http://sozdaiblog.ru ), у которого я нашла простое и главное бесплатное решение задачи. Делюсь. Посмотрите мои открытки с данным оформлением

http://ulubka.dohod2011.ru                           Ну, улыбнись!
http://man-ubeley.dohod2011.ru                   C юбилеем, родной!
http;//dayrogdenia-septemba.dohod2011.ru C Днем рождения!
Скачайте код по ссылке.
Стили добавляете в <style> между <head> </head>. Выделенное красным – описание видео, вставляйте прямо после <body>, синим описаны кнопки управления.
Самое незнакомое для многих будет описание формата видео в 3 вариантах. Как получить форматы webm и ogg на http://video.online-convert.com/ рассказано в видео. К моему сожалению, конверторы на компьютере данной операции не делают. Немного о расширениях .webm и .ogg
WebM – видеоформат от компании Google. WebM, свободный формат, основанный для обеспечения хорошего сжатия и высокого качества видео. Зачастую используют для демонстрации онлайн-видео при помощи тега <video> в HTML5. Формат конкурирует с видеостандартом H.264 и имеет поддержку в ведущих браузерах.
Расширение .ogg - представляет контейнер для хранения звука, видео, субтитры в разных форматах. Хранящиеся в контейнере аудио файлы сжимаются кодеками и отправляют результаты обработки в подобных контейнерах для хранения. Сохраняемые потоки могут кодироваться различными кодеками.

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

<video id="video_background" preload="auto" autoplay="true" loop="loop">

<source  src="http://man-ubeley.dohod2011.ru/bond-fuego.mp4" type='video/mp4'>

<source  src="http://man-ubeley.dohod2011.ru/bond-fuego.webm" type='video/webm'>

<source  src="http://man-ubeley.dohod2011.ru/bond-fuego..ogg" type='video/ogg'>

</video>

На своей открытке убрала кнопки управления – думаю они здесь лишние. На этом вроде все. Творите и дарите открытки.
Буду рада узнать ваше отношение к данному оформлению открыток. Напишите свое мнение в комментариях или на страничках в социальных сетях.

Наталия Сумина

 

Наталия Сумина

About Наталия Сумина

Я - Наталия Сумина, хозяйка этого блога. Рада приветствовать Вас! Буду рада общению! Удачи!
Bookmark the permalink.

8 комментариев к Вставляем видео как фон сайта

  1. svetlana says:

    Наташа,мне очень все понравилось-хороший светлый виртуальный дом.Желаю удачи.Появились идеи,но знаний пока маловато,буду дерзать.Светлана.

  2. Alina says:

    здравствуйте, Наташа. Информация интересная и полезная.Ваш блог очень тёплый и доброжелательный. Но картинка с видео не воспринимается.Возможно при другой планировке( размещению надписей и мелких картинок)будет лучше.

    • Alina, спасибо за комментарий. Если Вы о четкости картинки фона, то по моему мнению она зависит от качества используемого видео. Если о личном восприятии, то это просто ваш выбор.

  3. Наталья! Мне очень понравилось и уже есть идея на этот счет, попробую обязательно.
    Спасибо!

  4. http://sviv54.ru says:

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

    • Светлана. я создаю странички в SharePoint Des. Описание как это сделать можете посмотреть в курсе про открытку или есть на блоге несколько статей. Будут вопросы стучитесь в скайп nmsskype2010. Буду рада помочь

Понравилась информация? Оставьте Ваш комментарий