10 рекомендаций по использованию фонового видео

HTML

Главной основой такого фона, является тег video, который появился в HTML5. Его можно расположить перед закрывающим тегом body.

Обратите внимание на атрибуты тега video:

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

loop — начинает повторное воспроизведение видео после его окончания.

И также обратите внимание на формат видео, если вы хотите добиться воспроизведения видеофона в большинстве браузеров, то ваш ролик должен быть как минимум в двух форматах в MP4 и WebM

Важно: при конвертации видео в формат MP4, обязательно выберите видео кодек H.264, иначе ваше видео не будет воспроизводиться в браузере IE

Важно: при конвертации видео в формат MP4, обязательно выберите видео кодек H.264, иначе ваше видео не будет воспроизводиться в браузере IE

Соображения и ограничения

При реализации необходимо учесть несколько факторов:

• Автоматическое воспроизведение видео и звука должно быть отключено. Можно создать кнопку включения звука с помощью JavaScript.
• Видео должно иметь изображение-заполнитель для браузеров, которые не поддерживают HTML5. Оно также отображается на мобильных устройствах. Многие смартфоны и планшеты не поддерживают атрибут autoplay.
• Короткое видео может казаться повторяющимся (большинство роликов будет воспроизводиться циклически). Слишком длинное заслуживает того, чтобы стать отдельным элементом дизайна. Оптимальная продолжительность фонового видео составляет 12- 30 секунд.
• Видео должно быть небольшим и сжатым. В то же время оно должно масштабироваться на разных устройствах и экранах. Можно использовать медиазапросы или matchmedia для отправки версий видео разного качества на пользовательские устройства с экранами различных размеров. При этом размер ролика не должен превышать 5 МБ, а в идеале – менее 500 КБ.

Что такое контент

Контент – это любая информация, которая представляет хоть какую-нибудь ценность для посетителей. Говоря про сайты, мы чаще всего подразумеваем текстовый контент: статьи, новости, обзоры и т. д. Есть еще медиаконтент. К нему можно отнести аудио, видео, картинки. Также бывает игровой контент. К этой категории относятся всевозможные игры.

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

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

Более 100 крутых уроков, тестов и тренажеров для развития мозга

Начать развиваться

Итак, под контентом можно подразумевать:

Есть и другие виды контента, но рассматривать все просто нет смысла.

В общем, когда мы говорим про наполнение сайта, то подразумеваем размещение материала: видео, статей, новостей и т. д. В этом и есть суть работы с информационными сайтами – необходимо размещать какую-то определенную полезную информацию, чтобы в дальнейшем ею могли воспользоваться простые пользователи.

Видео в качестве фона для сайта на HTML5+CSS

На протяжении прошлого года веб-дизайнеры все чаще стали использовать оригинальный способ оживить сайт – установка видеоролика в качестве фона страницы. Интересный сюжет или просто «живая» картинка на фоне украсит даже обычный сайт-визитку, заинтересует пользователя и подвигнет дольше задержаться на сайте. Сегодня мы поделимся с вами одним из способов установить полноэкранный видео-фон для сайта на HTML5 и CSS.

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

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

1. Во-первых, нужно обязательно помнить о том, что видеоролик имеет довольно большой вес. Это может негативно сказаться на скорости загрузки страницы, особенно если у пользователя медленный интернет. Поэтому выбирайте не слишком продолжительные по времени видеоролики. В случае, когда требуется использовать довольно длинное видео, будьте готовы либо к работе над уменьшением его веса, либо к тому, что придется жертвовать частью аудитории.
2. Во-вторых, избегайте автовоспроизведения звука из видео. Используйте либо ролики без аудио, либо добавьте возможность пользователю самому включить звук, если ему это понадобится. Автоматическое воспроизведение звука при открытии сайта считается очень дурным тоном.
3. В-третьих, нужно позаботиться о кроссбраузерности и корректном отображении и воспроизведении видео на всех устройствах, а также предоставить альтернативу видео (для тех случаев, если оно не воспроизведется). Ниже в нашем примере мы покажем, как это сделать.
4. И в-четвертых, стоит хорошо подумать, уместен ли видеофон на том сайте, где вы захотели его установить, поскольку очень легко переступить грань между оригинальностью и бесполезностью данной затеи. Видео ни в коем случае не должно отвлекать пользователя от его главной цели, по причине которой он пришел на сайт. Устанавливая видео-фон под текстовым содержимым, не забудьте проверить, насколько читабельным стал текст. Например, он может слиться с фоном в определенный момент проигрывания видеоролика (белый текст на белом фоне, черный на черном и т. п.).

1. HTML

Для нашего примера взят видеоролик с разрешением 1920&#215;1080, продолжительностью 15 секунд и весом чуть больше 3 МБ. Внутри блока <div> с идентификатором video-bg находится наш фон:

Для тега <video> указаны следующие атрибуты:

• width – ширина области для воспроизведения ролика;
• height – высота области;
• preload – загрузка видео вместе со страницей;
• autoplay – автоматическое воспроизведение видео;
• loop – циклическое повторение видео;
• poster – изображение, которое отображается вместо видео, пока оно загружается либо недоступно.

Далее у нас записано два тега <source> , где указаны URL-адреса видео в разных форматах – MP4 и WEBM. Зачем подключать ролик в нескольких форматах? Дело в том, что не все браузеры поддерживают один-единственный формат видео. Чтобы видео смогли распознать все современные браузеры, необходимо предоставить файл хотя бы в этих двух форматах. А атрибут type с соответствующими значениями помогает браузеру быстрее определиться с выбором.

2. CSS

Наша таблица стилей для фона выглядит следующим образом:

Как видно из кода, фон установлен на всю страницу, а в качестве запасного фона задано изображение (кадр из этого же видео). В самом крайнем случае будет задействован цвет фона #94a233 .

Также в коде есть директива @supports , которая проверяет, поддерживает ли браузер свойство object-fit . Если да, то фон принимает значение cover и пропорционально отображается при разных размерах экрана.

Согласно данным с сайта caniuse.com, на сегодняшний день свойство object-fit поддерживается всеми браузерами, кроме Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 и Android Browser 4.1-4.4.

Что такое видеоконтент?

Давайте для начала дадим точное определение этому термину.

Видеоконтент – это некая информация, представленная в мультимедийном формате, которая создается под потребности и интересы целевой аудитории. Иными словами, видеозапись, которая пользуется спросом у пользователей, поскольку имеет для них какую-то ценность.

Например, это может быть видеопрезентация или реклама, носящая развлекательный характер, которая в простой и доступной форме демонстрирует особенности бренда или товара.

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

Забавный или шоковый клип позволяет выделиться на фоне конкурентов, привлечь внимание целевой аудитории

Основные требования к видео: оно должно быть полезным, понятным и запоминающимся.

По данным исследования TNS Web Index, видеоконтент охватывает 60 % активных интернет-пользователей, оставшиеся 40 % равномерно распределены между текстовым и фотоконтентом.

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

Статистика показывает, что нахождение на сайте нового посетителя длится 1-2 минуты. Очевидно, что пользователи чаще остаются на главной странице, нежели переходят в другие разделы

Поэтому так важно «зацепить» взгляд целевой аудитории

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

Вас также может заинтересовать: Все пароли и явки про видеомаркетинг

Как добавить видео в Tilda

Вставить видео на страницу сайта на Тильде не составит особого труда. Для этого есть специальные готовые решения в стандартных блоках Тильды, а также в Zero-block.

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

В какие блоки и как вставить видео поговорим в этой статье.

Как добавить видео в стандартные блоки

Начнем, пожалуй, с самого раздела Видео

Раздел Видео

блок VD01

В этот блок вы сможете вставить видео из Youtube. Обложка подтягивается автоматически.

блок VD03

В этот блок вы сможете вставить видео из Vimeo. Обложка подтягивается автоматически.

блок VD04

Простая кнопка для воспроизведения видео. По нажатию на кнопку открывается видео-плеер Youtube.

блок VD05

В это блок вы сможете добавить видео, загруженной на ваш хостинг или взятое с другого сайта (в этом случае вы полагаетесь на другой сервис). Формат видео может быть .MP4, .WEBM. Вам нужно будет в &#171;Контенте&#187; блока поставить ссылку на это видео. Также, не забудьте загрузить обложку для видео.

блок VD06

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

блок VD06A

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

В блок можно поставить ссылку на COUB &#8212; видео

блок VD08

Блок представляет из себя Текст и видео из Youtube. Ширину колонок можно менять. Сюда же можно добавлять кнопку под текст.

блок VD09

Всплывающий Pop-up блок с Youtube видео

блок VD10

Всплывающий Pop-up блок с видео из Vimeo

блок VD11

Блок с Youtube-видео. Сюда можно загрузить собственную обложку. Кроме этого, можно добавить Подзаголовок, Заголовок, Описание и Текст на обложку видео

блок VD12

Блок разделенный на две части: слева &#8212; видео из Youtube, справа &#8212; картинка. Обложка видео подтягиваются автоматически. Ширину колонок можно менять. Под картинкой можно добавить текст.

блок VD13

Блок c Youtube трансляцией. Сюда можно добавить живой чат, вставив html-код в соответсвующее поле.

блок VD14

Блок видео-плейлист. В &#171;Контенте&#187; блока можно вставить видео и с Youtube, и с Vimeo. Вставлять видео нужно в формате &#171;ссылка; заголовок видео; длительность видео; описание&#187;.

Другие стандартные блоки

Кроме вышеперечисленных блоков, видео можно добавлять:

• в обложки: CR01, CR02, CR06, CR07, CR08, CR10, CR11 , CR12 , CR15 , CR16, CR17 , CR18 , CR19 , CR19A , CR21 , CR22 , CR22A , CR27 , CR28 , CR36 , CR37 , CR38 , CR40 , CR41;
• в галереи: GL01, GL06;
• в текстовый блок: TX14;
• в форму: BF402N;
• о проекте: AB701;

Как добавить Видео в Zero-block

1. Создайте Zero-block и зайдите в его редактирование.
2. В левом верхнем углу нажмите на &#171;плюсик&#187; и выберите Add VIdeo

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

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

Рекомендую самостоятельно загрузить обложку к этому видео. Сделать это можно в этих же настройках блока.

1. Сохраните изменения.

Надеюсь, статья была полезная для вас.

2 комментариев к записи « Как добавить видео в Tilda »

Здравствуйте) Вставляю в зеро блок видео из ютюба и включаю автоплей, сохраняю, но на предпросмотре видео не воспроизводится автоматически, только если нажать на плей на видео. В чем может быть проблема ?

Привет) попробуйте выставить параметр mute. К url видео добавьте значение mute=1

Создание Video Background HTML 5 из примера 3

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

HTML

 <div class="video_bg">
<div class="video_bg_mask"></div>
<div class="post_title entry_post">
<h1 class="text-center">Video Background HTML 5 Section Here</h1>
<h2>Call 098-566-4998</h2>
<br>
<hr>
<h3>Or email us at support@mysite-admin</h3>
<a class="contact" href="#">Contact Us Now</a>
</div>
<div class="video_wrap">
<video poster="media/videoframe.png" loop autoplay muted>
<source type="video/webm" src="media/videoframe.webm">
<source type="video/mp4" src="media/videoframe.mp4">
</video>
</div>
</div>

Ну и CSS разметка, используемая в данном примере.

CSS

header{
overflow: hidden;
}
.video_bg{
position: relative;
max-height:700px;
}
.video_bg h1{font-size: 52px;}
.video_bg_mask {
position: absolute;
top: 0;
left: 0;
z-index: 9;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
}
.video_wrap{
position: relative;
width:100%;
height:100%;
overflow:hidden;
}
.video_wrap video{
min-height: 700px;
min-width: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
}
.video_bg .post_title {
display: block;
width: 80%;
height: auto;
background: transparent;
vertical-align: bottom;
margin: auto;
bottom: 0;
position: absolute;
top: 13%;
left: 10%;
z-index: 10;
padding-top: 15px;
padding-bottom: 15px;
text-align: center;
color: #fff;
}
.video_bg .post_title .contact{
font-size: 18px;
color: #fff;
border: 1px solid #fff;
padding: 10px 20px;
border-radius: 90px;
display: inline-block;
margin-top: 20px;
}
@media (max-width: 767px) {
.video_bg h1{
font-size: 38px;
}
.video_bg .post_title {
top: 5%;
}
}

На самом деле при создании Video Background можно импровизировать с HTML 5 разметкой и CSS свойствами, в зависимость от задач, поставленных веб разработчику. Поэтому к статье и приложены 3 примера для создания классных заставок и фонового видео.

Скачать исходники 3-х примеров Video Background

Скачать

— Для меня лично самое сложное и время затратное при создании видео в качестве фона является подборка нужных видеороликов.

Создаем видеоплеер с помощью HTML

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

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

Поэтому, создадим видео для фона сайта в двух форматах: H.264 и WebM. Этого будет достаточно, чтобы охватить основной ряд современных браузеров (Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer). Полученное видео рекомендуется обернуть в тег div для последующего позиционирования. Получим следующий код HTML:

Благодаря атрибуту autoplay видео будет проигрываться сразу после загрузки страницы, когда решит браузер (поскольку атрибут preload стоит на значении auto).

Создание Video Background HTML 5

В данной статье идет речь о создании Video Background &#8212; фоновой видео заставки HTML 5 веб страницы.

Поддержка форматов видео современными браузерами

Создание Video Background HTML 5 из примера 3

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

Video background HTML 5, вероятно, лучший способ привлечь внимание!

Поддержка HTML 5 видео

Совместимость с видео HTML5 действительно высока. Видео в HTML5 поддерживают все современные браузеры (> IE8), при этом, для просмотра не требуется установка дополнительных расширений.

Хорошее видео в фоновом режиме (video background) может легко заставить людей остановиться и изучить его, увеличивая время, которое они проводят на сайте. Это длительное время на сайте потенциально может привести к большему взаимодействию с другим содержимым на странице.

Для личного, либо корпоративного сайта можно снять небольшой (10-15 секундный видеоролик) и применять в качестве заставки video background. Тогда ресурс становится действительно индивидуальным и уникальным!

Итак, давайте приступим к созданию фонового видео.

Во первых нужно подготовить видео в трех форматах MP4, Ogg, WebM.

MP4 &#8212; Распостраненный формат, предназначенный для работы с видео и фото файлами. Ogg &#8212; Также контейнер для передачи, хранения и работы с аудео и видео. WebM &#8212; Собственно основной формат, сжатый. Применяется при создании и отправке HTML 5 видео и веб презентаций.

Конвертация в нужные форматы

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

Поддержка форматов видео современными браузерами

• Android devices — MP4
• Google Chrome — WebM, Ogg
• Mozilla Firefox — WebM, Ogg
• Opera — WebM, Ogg
• Safari — MP4 (including iPhone)
• Internet Explorer 9 — MP4
• Internet Explorer 6-8 — No HTML5, flash only

Теперь разберемся подробнее что из себя представляет HTML конструкция тега video

poster=»media/videoframe.png» &#8212; задает путь к скриншоту для видеозаставки, если видео недоступно, автоматически подставляется скрин, обычно используется скриншот первого кадра видео;

loop &#8212; повтор после окончания видео, бесконечное воспроизведение;

autoplay &#8212; проигрование видеоролика в автоматическом режиме, сразу после загрузки HTML 5 страницы;

muted &#8212; отключаем звук, хотя по умолчанию он и так отключен (необязательный атрибут);

<source type=»video/webm» src=»media/videoframe.webm»> &#8212; путь к файлу с видео в формате WebM HTML 5 видео;

<source type=»video/ogg» src=»media/videoframe.ogg»> &#8212; путь к файлу с видео в формате Ogg видео;

<source type=»video/mp4″ src=»media/videoframe.mp4″> &#8212; путь к файлу в формате MP4.

w3schools.com &#8212; все атрибуты тега video.

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

Создается Video Background не сложнее, чем обычное фоновое изображение с использованием минимального набора CSS свойств.

Оборачиваем тег video в div >

Задаем минимальные CSS свойства:

Все! А вы думали будет сложнее?

Создание Video Background HTML 5 из примера 3

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

Ну и CSS разметка, используемая в данном примере.

На самом деле при создании Video Background можно импровизировать с HTML 5 разметкой и CSS свойствами, в зависимость от задач, поставленных веб разработчику. Поэтому к статье и приложены 3 примера для создания классных заставок и фонового видео.

Скачать исходники 3-х примеров Video Background

&#8212; Для меня лично самое сложное и время затратное при создании видео в качестве фона является подборка нужных видеороликов.

Похожие по Тегам статьи

Публикую несколько примеров оформления текста в HTML. Выноски Callout нужны для заострения внимания читателя&#8230;

Собрал слайдер Bootstrap Ken Burns Effect Carousel и теперь делюсь с читателями своего сайта&#8230;.

Даю ссылку на простой генератор кода WordPress онлайн, основной задачей которого является ускорение написания&#8230;

Где можно заказать

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

В нашем списке бирж фриланса приводятся самые разные проекты. На них вы сможете разместить свой заказ или вакансию на постоянную работу. Также вы можете попытать счастья на различных сайтах для поиска работы. Там тоже выкладывают вакансии, и если вы ищете сотрудника для работы на постоянной основе, то hh.ru и ему подобные будут неплохим выбором.

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

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

Если вам нужны конкретные цифры, то средняя стоимость для написания статьи на бирже фриланса – 300 – 500 рублей за штуку, или же 40 – 50 рублей за тысячу знаков. Тут все зависит от тематики и сложности текста. Если вы поставите слишком низкую цену, то никто просто не будет брать заказ. Или его возьмет новичок, который сорвет все сроки и выдаст что-то неподходящее.

Просто смотрите на другие заказы и определяйте среднюю цену. Исходя из этого устанавливайте свою.

Существует еще автоматическое наполнение сайтов с помощью определенных программ. Обычно это проекты, которые просто копируют контент с других ресурсов. Будет ли успешен такой сайт или нет – большой вопрос. Ведь многие люди неплохо зарабатывают на ресурсах, которые просто парсят чужие материалы. Делается это при помощи скриптов или софта.

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

Мест для заказа наполнения очень много. Это могут быть биржи фриланса, различные социальные сети и форумы. Стоимость также может очень сильно различаться. Она зависит от огромного ряда факторов, которые не всегда можно сразу учесть.

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

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

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

Но это уже тема для отдельной статьи. Если вы хотите подробнее узнать о работе авторов и бирж, то я рекомендую почитать обзор на биржу копирайтинга Textbroker. Там все тяготы авторов и копирайтеров описываются наиболее полным образом.

Добавление аудио на HTML страницу

Формат аудио файла определяет структуру и особенности представления звуковых данных при хранении на носителе (запоминающее устройство). Для устранения избыточности аудиоданных, как правило, используются специальные аудиокодеки, благодаря которым производят сжатие аудиоданных. Современные браузеры поддерживают следующие 3 формата аудио:

Браузер	MP3	Wav	Ogg
Chrome	ДА	ДА	ДА
Firefox	ДА	ДА	ДА
Opera	ДА	ДА	ДА
Safari	ДА	ДА	НЕТ
IE	ДА	НЕТ	НЕТ
Edge	ДА	ДА	НЕТ

• Формат MP3 — это кодек и контейнер одновременно. Он широко используется повсеместно для размещения скачиваемой музыки.
• Формат WAV – также кодек и контейнер одновременно.
• Контейнер Ogg + аудио кодек Vorbis. Его обычно называют «Ogg Vorbis». Был разработан сообществом Xiph для того, чтобы заменить собой запатентованные MP3, AAC и WMA.

Элемент <audio> использует те же атрибуты, что и элемент <video>, за исключением атрибутов width (ширина), height (высота) и poster (изображение, которое отображается до воспроизведения видео). По аналогии с использованием элемента <video>, вы можете предоставить несколько вариантов аудио форматов с помощью элемента <source>, как показано в примере ниже:

В этом примере мы:

Добавили на страницу аудио-контент (тег <audio>), атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

Использовали тег <source>, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы браузера необходимо указывать в тегах <source> атрибут type (MIME-типы для аудио):

Формат	MIME-типы
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

Результат нашего примера:

Рис. 51 Добавление аудио на страницу.

Допускается добавлять аудио файлы с использование упрощенного синтаксиса (без использования тега <source>), но такая запись будет актуальна если все браузеры поддерживают данный формат аудио:

3 секрета эффективности видеоконтента

1. Экономит время.

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

Повышает доверие.

Благосклонность к человеку гораздо выше, если он знаком лично, а не по рассказам третьих лиц. Аналогичный принцип работает в отношении компаний, брендов, товаров. Видеоконтент на сайте делает потребителя более лояльным к продукту.

Исключает недопонимание.

Коммерческое предложение, деловое письмо или презентация не способны передать эмоции. В отличие от статической картинки видеоряд позволяет в точности воспроизвести любой месседж, избежав непонимания или искажения информации.

Рекомендуемые статьи по данной теме:

• Виды интернет-маркетинга: плюсы и минусы разных инструментов
• Продакт-плейсмент: преимущества, риски, примеры
• СTА-элементы, которые привлекут в 2 раза больше клиентов

Делаем задний фон на видео

Инструкция, представленная ниже, поможет вам получить необходимый результат. Главное – четко следовать алгоритму.

Первый шаг: Откройте редактор

Если Иншот уже установлен на ваше устройство, то вы его найдёте в меню приложений. Узнать программу можно по иконке с красным фоном и белым рисунком объектива. Ткните на неё.

Далее вам необходимо нажать на кнопку «Видео». В результате откроется экран с предыдущими проектами. Вам необходимо начать новый проект, нажав на одноимённую кнопку.

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

Второй шаг: Добавьте бэкграунд

В панели инструментов необходимо найти функцию под названием «Задний фон».
Значок имеет вид полосатого квадрата. Нажмите на него.

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

Оно автоматически появится позади клипа. Чтобы фон стал более заметным, немного уменьшите основной ролик. А ещё, вы можете выбрать размытость на свой вкус.

Третий шаг: Сохраните полученный результат

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

Далее повторно нажмите на надпись «Сохранить», дождитесь окончания конвертации и заливайте клип в сеть.

Основные виды видеоконтента + примеры

1. Презентационный.

Пример презентации в стиле инфографика

Формат в настоящее время является наиболее распространенным. Цель видеозаписи – презентовать целевой аудитории особенности и преимущества компании, товара или услуги. Традиционная телереклама, которая красочно описывает достоинства рекламируемого продукта, как раз и относится к данному виду видеоконтента.

Имиджевый.

Пример имиджевого ролика Газромбанка

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

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

Обучающий.

Пример обучающего мастер-класса

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

Вирусный.

Примеры вирусных видео 2017 года

Вирусный видеоконтент – это видеоролик, который привлекает внимание широкой аудитории, при этом не так важно какую реакцию он вызывает: одобрение, удивление и так далее. Особенность «вируса» заключается в том, что пользователи добровольно передают его друг другу. То есть он не только цепляет взгляд, но и побуждает делиться с окружающими: отправлять ссылки или видео в мессенджеры, делать репосты и прочее

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

Особенность «вируса» заключается в том, что пользователи добровольно передают его друг другу. То есть он не только цепляет взгляд, но и побуждает делиться с окружающими: отправлять ссылки или видео в мессенджеры, делать репосты и прочее.

Для вирусного ролика характерно не только большое количество просмотров, но и вовлеченность зрителей, которая проявляется в обсуждении, комментировании, копировании и так далее.

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

Социальный.

https://youtube.com/watch?v=ybGHmAdnsMc

Пример социального видео от Студии Лайм

Социальный видеоконтент акцентирует интерес пользователей на каком-либо общественно значимом явлении

Создателям видеозаписи важно обратить внимание целевой аудитории на наличие проблемы и упомянуть о собственном существовании, при этом сделать это завуалированно, чтобы реклама товара или услуги не была явной

Видео-Арт.

Пример Video Art

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

Например, короткометражные фильмы, которые не выходят в кинопрокат, а выкладываются на видеохостинге. Это доступный способ самовыражения, с помощью которого авторы несут искусство в массы.

Документальный.

https://youtube.com/watch?v=yHy31Dqrmek

Пример видео о реальной истории похудения

Этот популярный видеоконтент также именуется сторителлингом, то есть представляет собой донесение информации с помощью рассказа. С первых минут зритель погружается в атмосферу и начинает идентифицировать себя с главным героем. Желаемая реакция: «Да, это про меня», «И почему я сам до такого раньше не додумался», «Я сталкивался с похожей ситуацией».

Вас также может заинтересовать: Лучшие инструменты интернет-маркетинга: обзор платных и бесплатных