Я хочу створити веб-сайт із фоном відео HTML5.
У мене є короткий 1080p mp4 кліп, який я хочу використовувати (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). А якщо вам потрібне аудіо, майте на увазі, що деякі веб-переглядачі блокуватимуть автоматичне відтворення, тому обов’язково додайте зображення заповнювача за допомогою атрибута плаката .
Як каже МоріцЛост , зменшення масштабу. Можливо, покладіть десь посилання на повноцінну версію для зацікавлених людей. Нижній rez також зменшить використання ресурсів на стороні клієнта. Навіть зменшення масштабу до 640p, 576p або навіть 480p може бути хорошим, залежно від вмісту та того, наскільки він буде помітний за текстом вашої сторінки.
Крім того, оскільки кожен, хто відвідує ваш сайт, завантажує це відео, варто докласти додаткових клопотів, щоб переконатися, що ви видавите якомога більше якості за бітрейт. Esp якщо ви не плануєте змінювати відео дуже часто. Для h.264 це означає подачу джерела без втрат на x264 з попередньо встановленим = veryslow, crf = 26(або 2-прохідною бітрейт-ціллю). x264 - найкращий кодер h.264. (Незалежне тестування різних кодерів h.264 підтвердило це.) У ньому є дуже багато розумних алгоритмів пошуку способів створення дійсно невеликого файлу, який виглядає добре, враховуючи достатньо часу для процесора. (І може працювати швидко, якщо вам це потрібно, але час кодування не дуже важливий для цього випадку використання: кодуйте один раз, завантажуйте та відтворюйте МНОГО разів.)
НЕ відтворюйте аудіо за замовчуванням, коли ваша сторінка завантажується. Сподіваємось, здорові люди це вже знають, але МоріцЛост говорив про аудіо. Сторінки, які автоматично відтворюють аудіо, широко ненавидять і вважаються злими.
Якщо у вас є посилання на повноякісну версію відео, ви можете включити аудіозаписи з цим. 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, але це лише контейнери.
Я майже погоджуюся з усім, що говорить МоріцЛост .
Я просто хотів додати знімок екрана налаштувань вікна експорту, щоб допомогти встановити значення на прем’єрі pro.
Зазвичай я натискаю команду-M (Mac), щоб відкрити екран експорту, і я встановив би це так, як ви бачите нижче.
Важливим параметром, який слід зауважити, є налаштування біт. Я б встановив його на 1 Мбіт / с VBR, і дозволити до 2,4 для сцен, які отримують велику активність у певний час.
Спробуйте орієнтуватися на розмір файлу 1 Мб. (Відео для відправлення Paypal за 13 секунд становило 1,2 МБ, аудіо не було)
