Разберемся, какие видео нужно использовать на своем сайте, какие нужны форматы и какого размера видео должно быть.
Разбирать будем видео для тега <video>, понятно, что на сайте можем использовать видео и с youtube и с других потоковых видео-хостеров. Но цель разобраться, какие форматы можно использовать для загрузки на своем сайте.
Пример кода видео, загруженного на своем сайте:
<video class="video" loop autoplay muted poster="https://denis-creative.com/wp-content/uploads/2020/04/video-poster.jpg">
<source src="https://denis-creative.com/wp-content/uploads/2020/04/video.mp4" type="video/mp4" />
<source src="https://denis-creative.com/wp-content/uploads/2020/04/video.ogv" type="video/ogv" />
<source src="https://denis-creative.com/wp-content/uploads/2020/04/video.webm" type="video/webm" />
</video>
Примерно такой вид оно будет иметь при добавлении кода в HTML-блок:
Рассмотрим обязательные атрибуты для тега видео:
poster — указываем путь к скриншоту для видеозаставки, если видео недоступно или долго загружается, тогда автоматически подставляется постер, обычно используется скриншот первого кадра видео;
loop — повтор после окончания видео, бесконечное воспроизведение или зацикливание видео;
autoplay — автоматическое включение видеоролика после открытия страницы, чтобы убрать автоматическое включение видео, нужно удалить данный атрибут из тега <video>;
muted — отключаем звук – обязательный атрибут для фоновых видео, иначе во многих браузерах видео не будет автоматически включено пока пользователь не произведет какие-то действия на странице, по умолчанию звук включен;
controls – панель управления видеоплеером, если видео установлено в качестве фона, тогда данный параметр нужно удалить;
<source src="video.webm" type="video/webm"> — путь к файлу с видео в формате WebM HTML 5 видео;
<source src="video.ogg" type="video/ogg"> — путь к файлу с видео в формате Ogg видео;
<source src="video.mp4" type="video/mp4" /> — путь к файлу в формате MP4.
Видео обязательно должно быть в 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:
Пример полученного видео: