Как сохранить резкость при уменьшении видео Mp4 H264 в браузере?

Мне удалось создать резкое видео после долгих исследований. Тем не менее, теперь моя проблема заключается в уменьшении в браузере. Я пытаюсь сделать что-то похожее на это: https://framer.com/features/design/

Я связался с некоторыми людьми из Framer, и они упомянули, что они использовали большой экран сетчатки (с более высокой плотностью пикселей) и ScreenFlow для захвата и экспорта без дополнительного программного обеспечения для сжатия. Я заметил, что ScreenFlow имеет возможность использовать алгоритм, который поддерживает резкость при уменьшении видео.

Мой рабочий процесс все в Windows, учитывая, что приложение, которое я использую, тоже Windows.

Это мой рабочий процесс: Camtasia снимает с фиксированным размером 960x720 (я читал, что кадры H264 должны иметь размер, кратный 8 и 16, чтобы избежать пикселизации). Затем импортируйте и редактируйте в Adobe Premiere, экспортируйте с кодеком H264 с максимальной выходной и качеством. Импортируйте в Handbrake, выберите предустановку HQ1080p30, измените видео с постоянной частотой кадров и постоянным качеством 15, выход Mp4 оптимизирован для сети и НЕТ изменений в размере.

Когда мое видео воспроизводится с определенным размером 960x720, это идеально. Однако, когда все начинает уменьшаться, я замечаю, что шрифт становится нечетким, что плохо для адаптивного сайта.

Примечание: Premiere, Camtasia и Handbrake не имеют возможности использовать алгоритм, который поддерживает резкость при уменьшении размера, или, по крайней мере, я не смог его найти.

Я поместил небольшой HTML-код в перо для кода, чтобы вы могли визуализировать эту проблему :: https://codepen.io/danielvianna/pen/xrvzzJ

Примечание: просто измените размеры на (кратно 8 и 16)

832x624
768x576
704x528

— Даниэль Вианна
источник

«Premiere, Camtasia и Handbrake не имеют возможности использовать алгоритм, который поддерживает четкость», все это не имеет значения, если вы фактически не транскодируете для конкретного размера для каждого клиента во время отображения. Насколько я могу судить, вы нет. Вы вносите разрешение в видео во время разработки. Ваша проблема связана с масштабированием видео на стороне клиента. Обычно активы меняются на основе медиа-запросов. Видео, я подозреваю, потребует чего-то другого.

— Йорик

Я не эксперт в области видео, и кажется, что вы знаете больше меня, что бы я делал в моем случае?

— Даниэль Вианна

В том-то и дело: я не знаю, чтобы ответить. «Медиа-запрос CSS» может работать, но мне неясно, означает ли это, что видео будет перезапущено при изменении размера браузера. Медиа-запросы - это способ загрузки различных ресурсов в зависимости от обстоятельств. Это означает, что несколько версий имеют соответствующий размер. Youtube делает это, кстати, с помощью «качественного» выбора: в некоторых случаях вы можете видеть изображение с низким разрешением, но если вы переходите на полноэкранный режим на мониторе 1080p, вы можете увидеть увеличенную версию. Их игрок обрабатывает это для вас.

— Йорик

Проблема, на которую вы реагируете, заключается в «быстрых» (быстрое обычно означает менее точное качество) алгоритмах изменения размера, которые используют видеопроигрыватели и / или браузеры. Некоторые плееры будут иметь лучшие методы масштабирования, но это будет зависеть от флеш-плеера или любых встроенных функций браузера.

— Йорик