Chcę stworzyć stronę internetową z tłem wideo HTML5.
Mam krótki klip 1080p mp4, którego chcę użyć (20s). Zamierzam uruchomić film w formacie letterbox (5: 2 ish), pełny ekran za treścią strony (na przykład patrz strona Paypal: https://www.paypal.com/uk/webapps/mpp/home )
Jakie byłyby najlepsze ustawienia eksportu w Premiere CC do tego celu?
Odpowiedzi:
Powinieneś wyeksportować wiele wersji w celu dostosowania ich do różnych przeglądarek. Dzięki HTML5 możesz oferować różne wersje wideo, a przeglądarka automatycznie wybierze pierwszą obsługiwaną. Na przykład spójrz na kod źródłowy witryny PayPal, do której się odwoływałeś:
<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>
Jak widać, oferują zarówno wersję MP4 (kodek H264), jak i wersję wideo webm. To byłyby również dobre opcje dla ciebie.
Ponadto powinieneś postarać się, aby filmy były jak najmniejsze, aby odwiedzający witrynę z powolnym Internetem również mogli je obejrzeć. W tym celu należy wyeksportować wideo w rozdzielczości 720p zamiast 1080p (nikt nie zobaczy różnicy, szczególnie jeśli wideo znajduje się w tle) i dążyć do szybkości transmisji bitów poniżej 1 Mbit / s. Na przykład wideo paypal wykorzystuje bitrate około 700 Kbit / s. Jeśli nie potrzebujesz dźwięku, możesz eksportować bez dźwięku lub z niską przepływnością audio, tj. 96 Kbit / s.
Możesz również zapisać wideo ze strony internetowej na komputerze i sprawdzić kodek, szybkość transmisji i inne parametry, np. MediaInfo lub podobne programy.
Ponieważ to pytanie wciąż zyskuje wiele wyświetleń, chciałem dodać trochę aktualnych informacji. Do tej pory wszystkie nowoczesne przeglądarki obsługują MP4 (MPEG-4 / H.264) i już od dłuższego czasu będzie dobrze, oferując tylko MP4 dla większości projektów. Sprawdź powyższy link w tabeli zgodności przeglądarki, aby upewnić się, że wszystkie przeglądarki obsługiwane przez projekt mogą odtwarzać MP4. Pamiętaj, aby używać AAC dla ścieżki audio, a nie MP3, ponieważ jest obsługiwany przez mniejszą liczbę przeglądarek.
Mimo to możesz i powinieneś jako pierwszy zaoferować wideo WebM <source>, ponieważ oferuje lepszą kompresję, więc użytkownicy z ograniczonym pakietem danych będą ci wdzięczni. Chciałem tylko dodać, że jeśli masz ograniczone miejsce na dysku, czas renderowania lub inną zmienną, która utrudnia oferowanie WebM, MP4 jest teraz wszystkim, czego potrzebujesz.
Ponadto, ponieważ moja pierwotna odpowiedź zawierała coś o dźwięku, jeden dodatkowy wynos, który nie jest ściśle związany: dostawcy przeglądają filmy z autoodtwarzaniem (wideo, które zaczynają się odtwarzać automatycznie po załadowaniu strony, bez interakcji użytkownika), szczególnie jeśli wideo zawiera audio . Na przykład Safari zezwala na automatyczne odtwarzanie wideo tylko wtedy, gdy wideo nie zawiera ścieżki dźwiękowej lub wideo jest wyciszone (przy użyciu odpowiedniego atrybutu <video>elementu). Więc jeśli nie potrzebujesz ścieżki dźwiękowej, wyeksportuj wideo bez niej (automatyczne odtwarzanie wideo z dźwiękiem i tak jest nieznośne UX). A jeśli potrzebujesz dźwięku, pamiętaj, że niektóre przeglądarki blokują autoodtwarzanie, więc pamiętaj o dołączeniu obrazu zastępczego za pomocą atrybutu poster .
Jak mówi MoritzLost , zmniejsz skalę . Być może umieść gdzieś link do pełnej jakości wersji dla osób, które są zainteresowane. Niższa rez spowoduje również mniejsze zużycie zasobów po stronie klienta. Nawet zmniejszanie do 640p, 576p, a nawet 480p może być dobre, w zależności od zawartości i tego, jak widoczne będzie nadal za tekstem strony.
Ponadto, ponieważ KAŻDY, kto odwiedza Twoją witrynę, będzie ładował ten film, warto podjąć dodatkowe wysiłki, aby upewnić się, że wyciskasz jak najwięcej jakości na bitrate, jak możesz. Esp. jeśli nie planujesz często zmieniać wideo. W przypadku h.264 oznacza to podawanie bezstratnego źródła do x264 z ustawionym ustawieniem = veryslow, crf = 26(lub 2-przebiegowym celem przepływności). x264 to najlepszy koder h.264. (niezależne testowanie różnych koderów h.264 to potwierdziło). Ma wiele naprawdę sprytnych algorytmów do znajdowania sposobów na stworzenie naprawdę małego pliku, który wygląda dobrze, biorąc pod uwagę wystarczającą ilość czasu procesora. (I może działać szybko, jeśli jest to potrzebne, ale czas kodowania nie jest tak naprawdę odpowiedni dla tego przypadku użycia: koduj raz, pobierz i odtwarzaj WIELE razy).
NIE odtwarzaj domyślnie dźwięku podczas ładowania strony. Mam nadzieję, że rozsądni ludzie już to wiedzą, ale MoritzLost mówił o audio. Strony, które automatycznie odtwarzają dźwięk, są nienawidzone i uważane za złe.
Jeśli masz link do pełnej jakości wideo, możesz dołączyć do niego dźwięk. 96kb / s wystarcza, aby stereo AAC brzmiało doskonale. 64kb / s nadal będzie brzmiało dobrze. (o ile nie używasz złego kodera, np. niczego w ffmpeg innego niż libfdk-aac.
Rzuciłem okiem na wideo Paypal. (wyświetl informacje o stronie -> multimedia -> znajdź wideo -> zapisz jako).
mediainfo wynik:
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
Więc użyli x264 za pośrednictwem Handbrake, ale nie mogą wybrać odpowiedniego kompromisu między czasem procesora a zniekształceniem szybkości. ref=1,me=hex,subme=2wygląda jak veryfastustawienie wstępne. ( x264 --fullhelpaby zobaczyć, jak różni się każde ustawienie wstępne medium, które korzysta z ustawień domyślnych do wszystkiego.) Na szczęście dla nich domyślne crf 23ustawienie jakości jest odpowiednie dla ich przypadku użycia. Mogliby zaoszczędzić, zgaduję kolejne 20% przepływności z 1273kb / s, które uzyskali z crf23, używając lepszych ustawień, takich jak veryslow, a nawet po prostu mediumlub slow.
Postanowili także ograniczyć się do profilu głównego h.264, aby zachować zgodność ze starszymi urządzeniami z Androidem / iOS, co, jak sądzę, nadal jest dobrym pomysłem. ( --profile Main). Wideo, które wykorzystuje więcej bitrate, niż jest to potrzebne dla jakości, jest trochę wkurzone, więc naprawdę denerwuje mnie to, że ludzie nadal rozpowszechniają kodowanie profilu Baseline. Główny profil nie może używać 8x8dct, co również trochę boli, ale przynajmniej może użyć CABAC, aby zaoszczędzić około 15% bitrate vs. CAVLC, niezależnie od absolutnej rez / bitrate / innych ustawień.
IDK, jeśli jest możliwe przy wideo HTML5, aby mieć dostęp do strumienia podstawowego, głównego i wysokiego profilu. Wiem, że możesz mieć alternatywy MP4 i WebM, ale to tylko kontenery.
Prawie zgadzam się ze wszystkim, co mówi MoritzLost .
Chciałem tylko dodać zrzut ekranu z ustawieniami okna eksportu, aby pomóc w ustawianiu wartości w Premierze Pro.
Zwykle naciskam Command-M (Mac), aby wyświetlić ekran eksportu. Ustawiłbym go tak, jak widać poniżej.
Ważnym ustawieniem, na które należy zwrócić uwagę, są ustawienia szybkości transmisji bitów, ustawiłbym je na 1 Mb / s VBR i pozwoliłbym osiągnąć aż 2,4 dla scen, które mają dużą aktywność w danym momencie.
Spróbuj dążyć do rozmiaru pliku 1 MB. (Film Sendmoney Paypal miał 1,2 MB przez 13 sekund, brak dźwięku)
