Я хочу создать сайт с фоном видео HTML5.
У меня есть короткий клип MPP 1080p, который я хочу использовать (20 с). Я намерен запустить видео в формате почтового ящика (5: 2), на весь экран за содержимым страницы (пример см. На сайте Paypal: https://www.paypal.com/uk/webapps/mpp/home ).
Каковы наилучшие настройки экспорта в Premiere CC для этой цели?
Ответы:
Вы должны экспортировать несколько версий для разных браузеров. В HTML5 вы можете предлагать разные версии видео, и браузер автоматически выберет первую поддерживаемую версию. Например, взгляните на исходный код сайта PayPal, на который вы ссылались:
<video autoplay="autoplay" muted="muted" poster="none">
<source src="https://www.paypalobjects.com/webstatic/mktg/wright/videos/send-money.mp4" type="video/mp4">
<source src="https://www.paypalobjects.com/webstatic/mktg/wright/videos/send-money.webm" type="video/webm">
</video>
Как вы можете видеть, они предлагают как MP4 (кодек H264), так и веб-версию видео. Это было бы хорошим вариантом и для вас.
Кроме того, вы должны стараться сделать видео как можно меньше, чтобы посетители сайта с медленным интернетом также могли его смотреть. Для этого вы должны экспортировать видео с разрешением 720p вместо 1080p (никто не увидит разницы, особенно если видео находится в фоновом режиме) и стремиться к скорости передачи битов ниже 1 Мбит / с. Например, видео PayPal использует битрейт около 700 Кбит / с. Если вам не нужен звук, вы можете экспортировать без звука или с низким битрейтом, т.е. 96 Кбит / с.
Вы также можете сохранить видео с веб-сайта на свой компьютер и проверить кодек, битрейт и другие параметры, например, с помощью MediaInfo или аналогичных программ.
Поскольку этот вопрос по-прежнему получает много просмотров, я хотел бы добавить некоторую актуальную информацию. К настоящему времени все современные браузеры поддерживают MP4 (MPEG-4 / H.264), и уже достаточно долго, что вы будете в порядке, предлагая только MP4 для большинства проектов. Проверьте приведенную выше ссылку на таблицу совместимости браузеров, чтобы убедиться, что все браузеры, которые должен поддерживать ваш проект, могут воспроизводить MP4. Не забудьте использовать AAC для звуковой дорожки, а не MP3, поскольку она поддерживается меньшим количеством браузеров.
Тем не менее, вы можете и должны предлагать видео WebM в качестве первого <source>, так как оно обеспечивает лучшее сжатие, поэтому пользователи с ограниченным тарифным планом будут вам благодарны. Я просто хотел добавить, что если вы ограничены в отношении дискового пространства, времени рендеринга или какой-либо другой переменной, которая затрудняет предложение WebM, MP4 - это все, что вам нужно на данный момент.
Кроме того, поскольку в моем первоначальном ответе содержалось что-то об аудио, есть еще один важный момент, который не имеет прямого отношения: поставщики браузеров разгоняют видео с автоматическим воспроизведением (видео, которое воспроизводится автоматически после загрузки страницы, без взаимодействия с пользователем), особенно если оно содержит аудио , Например, Safari разрешит автоматическое воспроизведение видео только в том случае, если видео не содержит звуковой дорожки или видео отключено (с использованием соответствующего атрибута <video>элемента). Поэтому, если вам не нужна звуковая дорожка, экспортируйте видео без таковой (автоматическое воспроизведение видео со звуком в любом случае неприятно для UX). А если вам нужен звук, имейте в виду, что некоторые браузеры блокируют автозапуск, поэтому обязательно добавьте изображение-заполнитель с помощью атрибута poster .
Как говорит МорицЛост , в низком масштабе . Возможно, поместите ссылку где-нибудь на качественную версию для людей, которые заинтересованы. Снижение рез также снизит использование ресурсов на стороне клиента. Даже уменьшение масштаба до 640p, 576p или даже 480p может быть хорошим, в зависимости от содержимого и того, насколько оно будет видно за текстом вашей страницы.
Кроме того, так как КАЖДЫЙ, кто посещает ваш сайт, будет загружать это видео, стоит приложить дополнительные усилия, чтобы убедиться, что вы выжмете как можно больше качества на битрейт. Особенно если вы не планируете менять видео очень часто. Для h.264 это означает подачу источника без потерь в x264 с предустановкой = veryslow, crf = 26(или целью 2-проходного битрейта). x264 - лучший кодер h.264. (независимое тестирование различных кодеров h.264 подтвердило это.) У него есть много действительно умных алгоритмов для поиска способов сделать действительно маленький файл, который выглядит хорошо, при достаточном времени процессора. (И может работать быстро, если вам это нужно, но время кодирования не очень важно для этого варианта использования: кодируйте один раз, загружайте и воспроизводите МНОГИЕ раз.)
НЕ воспроизводите аудио по умолчанию при загрузке вашей страницы. Надеюсь, здравомыслящие люди уже знают это, но MoritzLost говорил об аудио. Страницы, которые автоматически воспроизводят аудио, широко ненавидимы и считаются злыми.
Если у вас есть ссылка на полноформатную версию видео, вы можете включить в нее звук. 96 кбит / с достаточно для отличного звучания AAC. 64 Кбит / с все равно будет звучать хорошо. (если вы не используете плохой кодировщик, например, что-либо в ffmpeg, кроме libfdk-aac.
Я посмотрел видео PayPal. (просмотреть информацию о странице -> медиа -> найти видео -> сохранить как).
mediainfo выход:
General
Complete name : /f/p/home-signup.mp4
Format : MPEG-4
Format profile : Base Media / Version 2
Codec ID : mp42
File size : 10.9 MiB
Duration : 1mn 11s
Overall bit rate : 1 276 Kbps
Movie name : Homepage SignUp - Alan Version
Album/Performer : Sorgel, Chase(AWF)
Composer : Sorgel, Chase(AWF)
Description : This video is about Homepage SignUp - Alan Version
Encoded date : UTC 2014-03-13 16:26:17
Tagged date : UTC 2014-03-13 16:26:29
Writing application : HandBrake 0.9.9 2013051800
Video
ID : 1
Format : AVC
Format/Info : Advanced Video Codec
Format profile : Main@L4.0
Format settings, CABAC : Yes
Format settings, ReFrames : 4 frames
Codec ID : avc1
Codec ID/Info : Advanced Video Coding
Duration : 1mn 11s
Bit rate : 1 273 Kbps
Width : 1 280 pixels
Height : 720 pixels
Display aspect ratio : 16:9
Frame rate mode : Constant
Frame rate : 30.000 fps
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Bits/(Pixel*Frame) : 0.046
Stream size : 10.9 MiB (100%)
Writing library : x264 core 130 r2273 b3065e6
Encoding settings : cabac=1 / ref=1 / deblock=1:0:0 / analyse=0x1:0x111 / me=hex / subme=2 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=0 / me_range=16 / chroma_me=1 / trellis=0 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=0 / threads=12 / lookahead_threads=4 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=1 / keyint=300 / keyint_min=30 / scenecut=40 / intra_refresh=0 / rc_lookahead=10 / rc=crf / mbtree=1 / crf=23.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / vbv_maxrate=20000 / vbv_bufsize=25000 / crf_max=0.0 / nal_hrd=none / ip_ratio=1.40 / aq=1:1.00
Encoded date : UTC 2014-03-13 16:26:17
Tagged date : UTC 2014-03-13 16:26:29
Color primaries : BT.709
Transfer characteristics : BT.709
Matrix coefficients : BT.709
Таким образом, они использовали x264 через Handbrake, но им не хватает выбора подходящего компромисса между временем процессора и скоростью и искажением. ref=1,me=hex,subme=2выглядит как veryfastпредустановка. ( x264 --fullhelpчтобы увидеть, чем отличается каждая предустановка medium, которая использует настройки по умолчанию для всего.) К счастью для них, настройка crf 23качества по умолчанию примерно подходит для их варианта использования. Они могли бы сэкономить, я думаю, еще 20% битрейта от 1273 кбит / с, которые они получили от crf23, используя лучшие настройки, например veryslow, или даже просто mediumили slow.
Они также решили ограничиться профилем h.264 Main для совместимости с некоторыми старыми устройствами на Android / iOS, что, к сожалению, все еще хорошая идея, я думаю. ( --profile Main). Видео, которое использует больше битрейта, чем необходимо для качества, является чем-то вроде любимчика, поэтому меня действительно раздражает, что люди все еще распространяют базовые коды профиля. Основной профиль не может использовать 8x8dct, что тоже немного больно, но, по крайней мере, он может использовать CABAC, чтобы сэкономить около 15% битрейта по сравнению с CAVLC, независимо от абсолютного рез / битрейта / любых других настроек.
IDK, если с видео HTML5 возможно иметь доступ к базовому, основному и высокому профилю. Я знаю, что у вас могут быть альтернативы mp4 и webm, но это всего лишь контейнеры.
Я в значительной степени согласен со всем, что говорит MoritzLost .
Я просто хотел добавить снимок экрана с настройками окна экспорта, чтобы помочь с настройкой значений в Premiere Pro.
Я обычно нажимаю command-M (Mac), чтобы вызвать экран экспорта, и я бы установил его, как вы видите ниже.
Важный параметр, который следует отметить, это настройки битрейта, я бы установил его на 1 Мбит / с VBR и разрешил до 2,4 для сцен, которые получают большую активность в определенное время.
Попробуйте стремиться к размеру файла 1 МБ. (Видео sendmoney Paypal было 1.2MB в течение 13 секунд, без звука)
