Разберемся, какие видео нужно использовать на своем сайте, какие нужны форматы и какого размера видео должно быть.
Разбирать будем видео для тега , понятно, что на сайте можем использовать видео и с youtube и с других потоковых видео-хостеров. Но цель разобраться, какие форматы можно использовать для загрузки на своем сайте.
Пример кода видео, загруженного на своем сайте:
Примерно такой вид оно будет иметь при добавлении кода в HTML-блок:
Рассмотрим обязательные атрибуты для тега видео:
poster — указываем путь к скриншоту для видеозаставки, если видео недоступно или долго загружается, тогда автоматически подставляется постер, обычно используется скриншот первого кадра видео;
loop — повтор после окончания видео, бесконечное воспроизведение или зацикливание видео;
autoplay — автоматическое включение видеоролика после открытия страницы, чтобы убрать автоматическое включение видео, нужно удалить данный атрибут из тега ;
muted — отключаем звук — обязательный атрибут для фоновых видео, иначе во многих браузерах видео не будет автоматически включено пока пользователь не произведет какие-то действия на странице, по умолчанию звук включен;
Какой нужен размер для превью
controls – панель управления видеоплеером, если видео установлено в качестве фона, тогда данный параметр нужно удалить;
— путь к файлу с видео в формате WebM HTML 5 видео;
— путь к файлу с видео в формате Ogg видео;
Видео обязательно должно быть в 3-х форматах:
MP4 — Распространенный формат, предназначенный для работы с видео и фото файлами.
Ogv — Также контейнер для передачи, хранения и работы с аудио и видео.
WebM — Собственно основной формат, сжатый. Применяется при создании и отправке 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
Из-за того, что разные браузеры поддерживают различные форматы видео и приходится делать 3 разных файла с одним видео, только в разных кодировках.
Часть 2. Сжатие видео
Итак, у нас есть классное видео в формате .mov, но оно весит 897MB, естественно, никто не будет грузить на сайт такие большие видео, во-первых, не хватит места на хостинге, если загружать такие видео, во-вторых, такие видео будут грузиться очень долго, и это будет большая нагрузка на хостинг.
Сжатие будем рассматривать на примере видео для фона, если видео нужно просто смотреть, то можете просто сделать его чуть лучше качеством, но, возможно, если вам важно высокое качество видео, то лучше загрузить его на какой-то CDN.
Для сжатия будем использовать Adobe Media Encoder
- Запускаем Adobe Media Encoder
- Загружаем в очередь свой проект.
- Задаем настройки:
- Формат: H.264
- Экспорт аудио отключаем, если видео используется для фона
- Ширина видео в зависимости от целей, но для фонового видео достаточно 960
- Частота кадров достаточно 24
- Кодирование: CBR
- Заданная скорость: 4 (но можно поиграть с этим параметром, чтобы получить оптимальный размер с максимальным качеством)
При заданных параметрах мы получим сжатое видео весом 7.4МБ, что довольно таки не плохо, но можно и меньше.
Если изменить параметр CBR до 3, то вес видео будет 5.59МБ, и больших отличий в качестве видео мы не заметим.
Дальше с этим видео и будем работать.
Часть 3. Конвертирование видео в нужные форматы
На руках у нас будет будео в формате .mp4 или любом другом, но для сайта нам нужно 3 файла с форматами .mp4, .webm и .ogv.
Для конвертирования видео будем использовать онлайн конверторы. Самые простые и популярные — эти три:
- https://video.online-convert.com/convert-to-mp4
- https://video.online-convert.com/convert-to-webm
- https://video.online-convert.com/convert-to-ogv
Прогнав наше видео через эти конверторы получим 3 файла:
- .mp4 весом 6.466МБ (оставим видео, полученное после сжатия — 5.59МБ);
- .webm весом 3.81МБ;
- .ogv весом 7.93МБ.
Эти видео и будем использовать у себя на сайте. При желании можно экспериментировать и сжимать их сильнее.
Альтернативный конвертор для видео:
- https://converterpoint.com/
Очень простой и удобный конвертор, но у него есть какие-то ограничения по количеству видео, которые можно сконвертировать и потом за определенные форматы нужно платить деньги.
Но если вам нужно сконвертировать 1-2 видео, то я рекомендую данный сервис.
- Он бесплатный.
- Он удобный, ничего лишнего.
- На выходе 3 нужных формата видео + картинка-постер.
- Он быстрый.
- Видео на выходе максимально сжатые по размеру.
Итак, возьмем то же самое исходное видео весом 5.59МБ и сконвертируем его через converterpoint.com. На выходе получим:
- .mp4 весом 1.799МБ;
- .webm весом 4.135МБ;
- .ogv весом 1.578МБ.
Интерфейс сервиса converterpoint.com:
Пример полученного видео:
Когда-то я уже делал небольшую статью про создание видео-фона в блоке (Делаем видео-фон для блока…
Суть проблемы — мобильные браузеры, в частности, Safari отображают семизначные числа как ссылку на телефон….
Для различных вариантов дизайна страниц нужно указывать разный цвет для плейсхолдеров в формах. Рассмотрим такой…
В общем, идея такая, слайдер листается и где-то рядом возле него меняются картинки в блоке,…
Источник: denis-creative.com
Как сделать превью или обложку для видео на youtube
Обложка для видео или заставка, значок? Превью на видео или шапка?
Под одними и теми же словами для разных людей скрываются разные понятия. Давайте определимся, о чем пойдет речь.
Шапка, обложка канала YouTube — это такая картинка, которая отображается на вашем канале в верхней части. Действительно, «Шапка», иначе и не назовешь. Слово «обложка» тоже приемлемо, но в сочетании с «каналом».
А вот обложка видео, миниатюра, превью и значок для видео – это относится уже к оформлению роликов. Именно эти картинки будут видны в списке ваших видеороликов, в поисковой выдаче и т.д.
Разница и в размерах. Шапка канала должна быть размерами 2560 на 1440 пикселей и о ней речь пойдет в другой статье.
В этом материале только об обложках видео (превью). И далее о том, какого размера должна быть обложка для видео на youtube.
Размер обложки для видео на ютуб
Оптимальный формат обложки для видео на ютубе и ее размер следующие:
- соотношение сторон обложки для видео на ютуб 16:9 , это принятый стандарт этой соцсети;
- размер обложки видео на youtube 1280 на 720 пикселей (можно сделать больше или меньше, но соблюдая соотношения сторон и ширину никак не меньше 640 пикселей);
- формат обложки для видео на ютубе jpeg, png, gif, bmp ;
- объем файла изображения не выше 2 Мб .
Переходим к тому, как сделать обложку для видео на ютуб онлайн. А именно: в графическом редакторе Canva.
Напомню, что все уроки по этому графическому редактору онлайн вы найдете по ссылке «Canva com»
Как создать обложку для ютуба онлайн в Canva
Откройте редактор Канва и выберите в списке предлагаемых разделов «Социальные сети и заголовки писем». В нем есть две вкладки, интересующие нас.
Для шапки канала — «Оформление канала YouTube» с соответствующими размерами, а для решения нашей задачи — «Миниатюра для YouTube».
Кликните по последней и переходите на открывшуюся страницу с макетами или, как их называют, шаблонами обложек Ютуб.
Шаблоны обложек для видео
Вы можете воспользоваться готовыми шаблонами обложек для видео на ютуб, изменив текст, цвет, картинку.
Помните, что русские шрифты далеко не всегда соответствуют тем красивым шрифтам, которые часто используются в макетах Canva. Все-таки число кириллических шрифтов слишком органичено. Однако и среди них можно подобрать подходящий.
О шрифтах в Канва и их редактировании читайте в статье про ШРИФТЫ.
Итак, добавили выбранный шаблон. Как его изменить?
Все шаблоны состоят из отдельных элементов, каждый из которых можно редактировать. Например, в выбранном мною шаблоне можно выделить и поменять уголки желтого цвета, саму фотографию и шрифт.
О редактировании шаблонов читайте в статье «Как создать шаблон», где подробно описано, как пользоваться макетами, как переходить от слоя к слою и т.д. Здесь я ограничусь демонстрацией результатов преображения
Текстуры и фон для обложки видео
Для фона обложки вы можете использовать бесплатные фотографии в самой Канве. Они расположены во вкладке «Элементы» и далее «Бесплатно». Выбирайте картинки для обложки видео горизонтального формата, вытянутые по ширине.
Также подойдут и разнообразные текстуры и графические заливки, расположенные во вкладке «Фон».
В примере выше в качестве фона для обложки видео на ютубе я взяла заранее подготовленное фото. Вы также можете использовать собственные картинки для обложки видео или скачать их из интернета.
Не пользуясь готовыми макетами можно сделать фон для превью видео из стоп-кадра вашего видео. Вариант подходит в том случае, если качество вашего ролика высокое и в нем есть интересные эпизоды.
Использование стоп-кадра для создания обложки
Остановите ваше видео на красивом кадре, сделайте скриншот.
Загрузите картинку для обложки видео в редактор Канва, добавьте ее на чистую заготовку и растяните, если нужно, потянув за маркеры.
Далее все зависит от вашей фантазии и вкуса. В примере ниже я показала, как сделать надпись на полупрозрачной подложке.
Текст на обложке для видео
Для подложки выберите в разделе «Элементы» квадрат, перетяните его на заготовку, измените цвет, если необходимо и растяните вдоль нижней части обложки. Сделайте полупрозрачным, используя соответствующий инструмент.
Прозрачность меняется в верхнем правом углу редактора, как на картинке ниже:
Далее на эту подложку добавьте нужный текст и отформатируйте его. Меняйте цвет, начертание, регистр. У вас должно получиться что-то аналогичное шаблону ниже:
Меняя расположение фигуры, ее прозрачность, цвет, форму вы получите множество других вариантов обложки.
Не обязательно искать многоугольники: например, для последнего варианта прямоугольник повернут и сдвинут к правому краю. Прозрачность нулевая.
Можно добавить рамку, используя все ту же вкладку «Элементы».
Или заменить прямоугольник на круг, добавить еще одну подложку и т.д. Обложка видео на youtube готова.
Все зависит от вашей идеи, навыков работы в программе. Чтобы ближе познакомиться с возможностями этого графического редактора посмотрите рубрику, которая так и называется Canva.com.
С моей точки зрения Canva – идеальная программа для создания обложки для ютуба.
Как поставить картинку на видео на Ютубе
Вам остается только скачать обложку видео youtube, сделанную своими руками в программе онлайн, на компьютер и затем загрузить на ютуб для вашего ролика. Это делается при заливке или редактировании видео на канал. Есть специальная иконка, кликните по ней и загрузите обложку.
Помните о том, что если хотите продвигать ваше видео, вы должны соблюдать определенные условия по имени файла обложки и еще массу моментов. Хотите узнать больше? Читайте о продвижении видео на YouTube бесплатно. Там же есть и запись вебинара на данную тему.
Успешного вам творчества!
Источник: arsenalweb.ru
Какое разрешение для ютуба
Каждый день на видеохостинге Youtube регистрируются новые пользователи, чтобы делиться с миром своими видеошедеврами. Если вы также хотите поделиться с общественностью своими видеоматериалами, учитывайте, что Ютуб предъявляет ряд требований к видеороликам и обложкам для них. Разберем, какие форматы видео поддерживает Ютуб и как правильно форматировать видеоматериалы.
Формат видео для Ютуба
Система рекомендует загружать видеоматериалы с наилучшими характеристиками для обеспечения высокого качества при воспроизведении. Чем выше разрешение загружаемого материала, тем выше вероятность, что он будет воспроизводиться в первоклассном качестве. Также для оптимизации качества хостинг повторно кодирует все ролики.
Какого формата видео можно загружать на Ютуб
Сегодня распространенным вопросом является, в каком формате загружать видео на Youtube. Сегодня наиболее распространенными являются MPEG-2 или MPEG-4 и широковещательный. Для каждого из форматов видео для Youtube есть свои ограничения:
- MPEG-4: скорость воспроизведения аудио минимум 128 Кбит/с, видеокодек H.264 и аудиокодек AAC.
- MPEG-2: скорость воспроизведения аудио от 128 Кбит/с, аудиокодек Dolby AC-3/ MPEG Layer 2.
Длительность
Длительность визуального и аудио фрагментов составляет от 33 секунд, не считая фоновый шум при проигрывании звуковой дорожки, черное изображение или статичную картинку.
Youtube формат видео: частота кадров
Главное требование — избегайте повторное сэмплирование, потому что оно ведет к ухудшению качества видеоматериала, дрожанию картинки. Чаще всего используют частоту: от 24 до 30 кадров/сек. Не стоит делать какие-либо переносы (переводить фильм в видеоформат и тому подобное) или увеличивать дискретизацию.
Как должны соотноситься стороны для формата видео Ютуб
Лучше всего сохранять первоначальное соотношение, не стоит вставлять полосы (по горизонтали или вертикали). Для обеспечения оптимального изображения проигрыватель сам делает рамки для видеоролика, при этом картинка не растягивается и не обрезается.
Какой формат видео лучше для Ютуба: разрешение
Лучше использовать максимальное разрешение. Чем выше разрешение, тем лучше гибкость материала при воспроизведении и кодировании. Если вы хотите продавать видеоролик или запускать его в прокат, минимальное разрешение составляет 1920 x 1080, а стороны должны соотноситься в пропорции 16:9. Для видео с поддержкой рекламы хостинга и для бесплатного контента разрешение должно быть от 1280 x 720, а стороны также соотносятся как 16:9. Если стороны соотносятся в пропорции 4:3, разрешение составляет 640 x 480.
Для видеоматериала, который не будет заливаться в открытый доступ, разрешение можно снизить. Также разрешение можно уменьшить, когда ролики создаются и загружаются для использования в системе Content ID. Здесь можно использовать разрешение 320 x 240.
В каком формате выкладывать видео на Ютуб, с каким битрейтом
Такой показатель как битрейт напрямую зависит от кодека, поэтому здесь нет минимального порога. Лучше форматировать видео по вышеперечисленным параметрам. Стандартный показатель битрейта для видеороликов, которые создаются для проката и продажи — от 50-80 Мбит в секунду.