Открыл для себя формат видео webm как обязательный для встраивания
Хоть верстка сайтов – штука достаточно легкая и мне в удовольствие, я не могу знать о ней прям все. А в моем случае даже о таких основах, как встраивание видео. Уже на практике столкнулся с таким явлением, как отсутствие прогрузки видео в зависимости от его формата, но обо всем по порядку.
Пишу от не**й делать по настроению рофлостатью про аниме в свой бложик по принципу “по**й кому смешно, главное, чтоб мне было смешно”. Ну и помимо всяких картинок вставляю видосики. Собственного плеера для встраивания нет, а потому, как и многие, полагаюсь на браузерный.
С форматом особо не запариваюсь: всем известный .mp4.
Пока статья еще не вышла в релиз и остается на устройстве, крутится в локалхосте, грузится все мгновенно и замечательно, нюансов не видно. Но вот стоило ей релизнуться в веб, как тут же выясняется неожиданный и неприятный нюанс: видео не воспроизводится, пока не загрузится полностью. Ну и вот что мне делать? Заставлять пользователя ждать, пока видео загрузится?
Из догадок, почему так, чет первое в голову забавное влетело, мол это могут быть некие особенности сервера и это такая особенность хостинга статических сайтов на всяких гитхабах, гитлабах. Ну и примерно в этот же момент я просто уменьшил разрешения видео для встраивания, оставляя ссылку на оригинальное качество.
Гуглёшь ситуации дал мне примерное понимание, что есть видеоконтейнеры, типа тех, что бывают в видео формата .mp4, которые ну никак не годятся для потоковой передачи, в отличие от специализированного .webm. Ну и где-то в федиверсе меня один чел параллельно как раз спрашивал, мол почему не .webm? Мол, в .webm достаточно сильно ужимаются видосики, особенно большие.
Но меня не нае**шь! Я помню, что видосики .webm для скачивания с ютуба весят побольше, чем в .mp4! И по**й, что ютуб .mp4 ужимает по-особенному.
На самом деле к тому моменту я просто уже задолбался что-либо выяснять и экспериментировать и просто на целых полгода оставил как есть. И только совсем недавно, добавляя очередное аниме и рофляный видосик к нему, я вдруг решил переформатировать его в .webm. И каково же было мое удивление обнаружить, что вот в этом случае видео воспроизводится во время его загрузки! Ну и как итог я все видео в той статье сделал формата .webm с высоким качеством. Но и оригинальные .mp4 не везде удалял, оставив на них ссылки.
Вот уж действительно формат специально для веба. Давайте познакомимся с ним поближе!
В любой программе для перекодирования видео с одного формата на другой, а в моем случае это HandBrake, при выборе .webm в качестве выходного формата будут доступны только три его кодировщика: VP8, VP9 и AV1. Естественно я сразу на практике проверил все три вместо того, чтобы погуглить, что за они. И о чудо, самым лучшим кодировщиком для сжатия видео по размеру оказывается самый последний по дате выпуска: AV1.
Касаемо аудио, для формата .webm доступно только два кодировщика: Vorbis и Opus. Тут бы я, конечно, сам анализировал бы, что лучше, но уже читая про AV1 на википедии уже вижу, что зачастую AV1 идет совместно именно с Opus и просто выставляю его. Еще и битрейт выставляю пониженный, 96 kbps, как в одном из видео для веба увидел, мол почему бы и нет? Чем меньше размер, тем лучше!
Возвращаемся к настройкам видео. Кадры в секунду, естественно, переменные. Особенно для аниме, где картинка часто статическая. Другое дело некоторые специализированные настройки с названиями vq, psnr, ssim, iq и ms-ssim. Нихрена не понятно, что за настройки, но в итоге я весь стак прогуглил и еле как нашел, что это что-то вроде способа обработки для сжатия видео через визуальные искажения.
VQ, он же Visual Quality, из них самый щадящий для визуала, пытается сохранить картинку как можно ближе к оригиналу, от чего сжимает видео менее эффективно по сравнению с другими.
PSNR, он же Peak Signal-to-Noise Ratio, по сравнению с vq, говорят, может добавить мыльца картинке. Однако во многих кодировщиках именно он стоит и применяется по умолчанию.
SSIM, он же Structural Similarity Index Measure, если я правильно понял, в основном затрагивает яркость и контрастность изображения, и, как я уже убедился, является самой эффективной для сжатия изображения настройкой. Его усовершенствованная версия MS-SSIM, т.е. Multi-scale SSIM, на словах из википедии получше будет, но возможно имеется в виду именно качество изображения, а не размер.
Что за IQ я так и не нашел. По сжатию видео показал себя хуже ssim.
Так как все видео были в основном мемами про аниме, я не заметил каких-либо неприятных приколов с ssim и выбрал именно его. И больше ничего не трогал. Хотя, возможно, стоило бы дополнительно ползунок предустановки покрутить…
ИТОГО:
- Кодировщик видео – AV1
- Переменная частота кадров
- Настройка – ssim
- Кодировщик аудио – Opus
- Битрейт аудио – 96 kbps
- Остальное (где возможно) – “Как в источнике”
Файл пресета для HandBrake: WebM for WEB ssim.json
Был еще нюанс с превью для видео…
В общем автоматически превьюшка для видео вроде как берется с первого кадра, но только в случае, если видео вообще грузится. В случае формата .mp4 видео должно было полностью загрузиться не только для воспроизведения, но и для превью. Ну и тогда давно я отключил предзагрузку видео, чтоб банально статья не грузилась долго. Но не оставлять же видео пустыми без превью? Есть возможность ставить кастомные превьюшки и тогда была найдена ахиренная кастомная превьюшка.
С форматом .webm как будто бы нет смысла запрещать предзагрузку и ставить кастомную превьюшку. Однако все же с одной стороны это все равно более длительная загрузка статьи, а с другой – какая же красивая универсальная превьюшка для любого видео была найдена…
20.03.2026