Последняя редакция: 15 октября 2019 г.
Онлайн-видео пользуется колоссальной популярностью в интернете и уже стало привычным элементом веб-дизайна.
Видео приковывает взгляды и будит воображение, а потому неудивительно, что многие сайты помещают видеоролики не где-нибудь, а прямо на главной странице. Сегодня почти все браузеры поддерживают стандарт HTML5 для видео, поэтому добавьте на свой сайт видеофон или шапку, и вы не прогадаете!
Clipchamp предлагает широкий выбор шаблонов, которые отлично впишутся в дизайн любого сайта. Этот потрясающий синемаграф — лишь один из примеров:
Аргументов в пользу HTML5-видео множество, но не спешите тут же менять свой сайт. Дело в том, что в данном вопросе есть свои подводные камни и, чтобы видео работало без запинок, его сначала нужно оптимизировать. В этой статье мы рассмотрим следующие вопросы:
Зачем оптимизировать видео для сайта
Посетители не любят медленные сайты
Не все видеоформаты одинаково полезны
Как оптимизировать видео с помощью Clipchamp
Сжатие видео для HTML5
Преобразование видео для браузера
1. Зачем оптимизировать видео для сайта
Преимущества HTML5 даются не просто так. Автоматическое воспроизведение встроенного видео замедляет загрузку страниц, что неизбежно ведет к снижению посещаемости. Также может оказаться, что видео не поддерживается в некоторых браузерах, которыми пользуются ваши клиенты.
Посетители не любят медленные сайты
HTML5-видео слишком большого размера способно серьезно затормозить работу сайта. Вряд ли ваши посетители будут в восторге от видеоролика с постоянным зависанием и буферизацией.
Получается, что та самая изюминка, которая должна была преобразить ваш сайт, может, наоборот, вызвать у посетителей одно раздражение.
Даже если поисковая оптимизация и отличная линейка услуг делают свое дело и приводят на ваш сайт толпы посетителей, неприятные впечатления от зависающего видео могут запросто свести все ваши усилия на нет. Причем от вашего сайта отвернутся не только люди, но и Google: время загрузки страниц и процент ухода посетителей — важные показатели, которые влияют на ранжирование вашего сайта в Google. Вот почему видео для сайта сначала необходимо сжать.
Если ваши видеоролики хранятся в облаке, убедитесь, что ваш облачный хостинг гарантирует быструю загрузку и высокий процент аптайма. Так посетители сайта смогут смотреть ваше видео без лишних пауз.
Всегда бесплатно. Или расширенная подписка от 9 $ в месяц.
Не все видеоформаты одинаково полезны
Даже от лучшего в мире HTML5-видео мало толку, если оно не грузится в браузерах ваших посетителей. Между браузерами и видеоформатами тоже случается несовместимость, поэтому, если вы не хотите краснеть за нерабочее видео на своем сайте, советуем воспользоваться конвертером. Важно, чтобы ваши видеоролики принимало как можно больше браузеров и устройств.
К сожалению, одного формата, «чтоб править всеми», не существует, но стоит отметить два варианта — WebM (VP8) и MP4 (H264). Они совместимы с большинством браузеров, хотя и не со всеми.
Прежде чем применить видео в качестве элемента дизайна сайта, рекомендуем преобразовать его в WebM, но при этом в качестве альтернативы также предоставить видео в MP4. Таким образом, если формат WebM не поддерживается (что случается редко), браузер загрузит MP4-версию видео.
2. Как оптимизировать видео с помощью Clipchamp
У оптимизации видео для сайта есть два основных аспекта — сжатие и преобразование. И то, и другое можно проделать бесплатно с помощью Clipchamp Utilities.
Сжатие и преобразование, о которых шла речь выше, помогут существенно сократить время загрузки страниц и повысить эффективность воспроизведения.
Но прежде чем вы возьметесь за работу, хотим дать вам одно напутствие: старайтесь сильно не сокращать разрешение и битрейт видео, иначе пострадает качество. Однако если вы используете видео в качестве фона, дела обстоят чуть лучше. Ведь фоновое видео не находится в центре внимания и к тому же часто проигрывается на небольших экранах, так как многие люди уже привыкли просматривать сайты на телефонах.
Как правило, фон представляет собой зацикленное HTML5-видео, расположенное под прозрачными слоями или текстовыми элементами. Такое видео должно быстро грузиться и плавно проигрываться на любом устройстве независимо от скорости соединения. Поэтому в данном случае сократить размер файла важнее, чем сохранить разрешение. Кстати, собственный сайт Clipchamp — наглядный пример вышесказанного. Но вернемся к вопросу оптимизации...
Сжатие видео для HTML5
Как вы уже, возможно, догадались, Clipchamp — бесплатный онлайн-редактор для преобразования и сжатия видео — поможет вам сократить размер файла, сохранив при этом достойное качество.
Наша платформа уже набрала популярность среди графических и веб-дизайнеров, разработчиков и создателей сайтов на WordPress, Wix и Squarespace. Нас рекомендуют в блогах по веб-дизайну и на платформах для визуального конструирования сайтов, например, Webflow. Причем отмечается именно возможность сжимать фоновое видео и синемаграфы для сайтов.
Clipchamp выполняет сжатие и преобразование видеофайлов прямо в браузере, после чего вы можете загрузить их на свой сервер, хостинг или в конструктор сайтов. Таким образом, наш сервис помогает вам не только оптимизировать видео, но и быстрее загрузить его на сайт.
Обычно для сайтов мы рекомендуем сжать видео как минимум до разрешения 720p, выбрав в настройках Clipchamp среднее или низкое качество. В опциях вывода можно выбрать, как «веб», так и «мобильные устройства». Вариант «мобильные устройства» позволяет получить на выходе более компактный файл, чем вариант «веб», но и качество картинки будет чуть ниже.
Преобразование видео для браузера
На сервисе Clipchamp Utilities вы можете с легкостью преобразовать видео, чтобы повысить его совместимость с различными браузерами. Просто загрузите видео, выберите необходимый формат в настройках и доверьте всю остальную работу бесплатному конвертеру Clipchamp:
Если в качестве запасного варианта вы хотите добавить видео в MP4, выполните всё то же самое, но в качестве формата выберите MP4.
