Вставка видео в без горизонтальных черных полос
Вставил видео 16:9 фоном на сайт свой zasovskiy.ru. вроде все ок. Но когда я меряю размер экрана на планшет, сразу у видео появляются вертикальные черные полосы сверху и снизу. Как бы мне это видео сделать адаптивным чтоб растягивалось под размер контейнера и заполняло полностью?
Отслеживать
задан 1 ноя 2022 в 20:20
попробуйте свойство object-fit: cover или изменяйте размеры видео под размеры экрана пользователя (изменение размеров экрана можно отследить с помощью события resize)
Как конвертировать вертикальное видео в горизонтальное 16:9 всего за один шаг
Многие пользователи смартфонов записывают вертикальные видео, держа телефон перед собой. Несложно догадаться почему: это естественный способ держать небольшой предмет в форме шоколадного батончика. Однако большинство компьютеров и телевизоров, а также контент, которых на них воспроизводят, ориентированы горизонтально.
В этом руководстве вы узнаете, как, используя FFMpeg конвертировать вертикальное видео с нечеткими краями и растянутым фоном, как вы это видели на Youtube или в новостях. За один шаг.
Вам понадобится
Чтобы продолжить, вам понадобится:
- FFMpeg
- доступ к командной строке
- видео файл: в этом руководстве используется .mp4, но .mov также подойдет (наш пример – ‘Overpopulated Goldfish’ с VideoHive)
Конвертируем вертикальное видео в горизонтальное
Вот как конвертировать вертикальное видео в горизонтальное, 16:9 видео:
Откройте терминал
Для начала откройте терминал (Command-T на Mac, Control-T на Linux, BSD и схожих системах, а для тех, у кого Windows – cmder) и пройдите к папке, где содержится нужное видео.
Запускайте FFMpeg
Теперь вставьте следующую строку, содержащую inputfile.mp4 для имени исходного файла, а outputfile.mp4 можно назвать как захотите, главное сохранить расширение .mp4 и чтобы названия не совпадали:
ffmpeg -i inputfile.mp4 -filter_complex ‘[0:v]scale=ih*16/9:-1,boxblur=luma_radius=min(h\,w)/20:luma_power=1:chroma_radius=min(cw\,ch)/20:chroma_power=1[bg];[bg][0:v]overlay=(W-w)/2:(H-h)/2,crop=h=iw*9/16’ outputfile.mp4
Конвертируем
Жмите Enter.
Готово! Подождите, пока FFMpeg закончит.
Еще подсказки
В центре этого способа находится boxblur фильтр MMPeg. Вы можете поменять эффект, изменяя настройки, а также можете использовать sab , smartblur и unsharp . Документация FFMpeg имеет полный список всех настроек.
Если ваше видео немного нестабилизировано, рекомендую сперва применить стабилизацию на ваше вертикальное видео перед созданием горизонтального. Немного стабилизации до создаст намного более плавный конечный результат.
И напоследок: если вы не умеете пользоваться командной строкой, рекомендую серию уроков Кезз Брейси Командная строка для веб-дизайнеров, это отличное введение.
Адаптивная вёрстка, урок второй. Адаптивное видео на сайте
В этом уроке вы узнаете, как добавить видео на сайт с помощью элементов и , а также как сделать контейнер с видео адаптивным.
Тег позволяет воспроизводить видео со сторонних ресурсов, таких как YouTube и Vimeo. Элемент создаёт на странице вложенную область, в которую загружается другая html-страница (при наличии атрибута src ) или любой другой контент. Элемент не должен находиться внутри элемента или . Для элемента доступны глобальные атрибуты, а также собственные:
Как сделать адаптивное видео на сайте
1. Адаптивное HTML5 видео
Когда элемент впервые стал появляться на страницах сайтов, для воспроизведения видео-файлов необходимо было добавлять три файла в форматах .mp4 (для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7), .webm (для Firefox4, Opera, и Chrome) и .ogg/ogv (для старых версий браузеров Firefox и Opera). В настоящее время все современные браузеры поддерживают формат .mp4 .
Чтобы видео адаптировалось под ширину блока-контейнера с сохранением пропорций, зададим элементу следующие свойства:
video
2. Адаптивное видео с YouTube или Vimeo
Видео с YouTube или Vimeo добавляется на страницу с помощью элемента . Для управления адаптивностью видеоплеера обернём фрейм дополнительным блоком с классом thumb-wrap . Получить код фрейма Vimeo можно по кнопке Share , далее значок тега. На YouTube нужно щёлкнуть правой кнопкой мыши по видео, далее «Копировать HTML-код».
Видео Vimeo
Видео YouTube
Чтобы сделать адаптивный блок с видео-роликом, который корректно будет отображаться на всех устройствах, воспользуемся следующим приёмом:
.thumb-wrap < position: relative; padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */ height: 0; overflow: hidden; >.thumb-wrap iframe