HTML5 video arka planına sahip bir web sitesi oluşturmak istiyorum.
Kullanmak istediğim kısa bir 1080p mp4 klipim var (20s). Videoyu, sayfa içeriğinin arkasında tam ekran şeklinde bir posta kutusu biçiminde (5: 2 ish) çalıştırmak istiyorum (örneğin, Paypal'ın web sitesine bakın: https://www.paypal.com/uk/webapps/mpp/home )
Bu amaçla Premiere CC'deki en iyi dışa aktarma ayarları nelerdir?
Yanıtlar:
Farklı tarayıcılara uyum sağlamak için birden fazla sürümü dışa aktarmalısınız. HTML5 ile videonun farklı sürümlerini sunabilirsiniz ve tarayıcı otomatik olarak desteklenen ilk sürümü seçecektir. Örneğin, başvurduğunuz paypal web sitesinin kaynak koduna bakın:
<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>
Gördüğünüz gibi, hem mp4 (H264 codec) hem de videonun webm sürümünü sunuyorlar. Bunlar da sizin için iyi seçenekler olacaktır.
Ayrıca, yavaş internete sahip site ziyaretçilerinin de izleyebilmesi için videoları mümkün olduğunca küçük tutmaya çalışmalısınız. Bu amaçla, videoyu 1080p yerine 720p ile dışa aktarmalısınız (özellikle video arka planda ise kimse farkı göremez) ve 1 Mbit / s'nin altında bir bit hızı hedeflemelisiniz. Örneğin, paypal video yaklaşık 700 Kbit / s'lik bir bit hızı kullanır. Sese ihtiyacınız yoksa, ses olmadan veya ses bit hızı düşük, yani 96 Kbit / sn dışa aktarabilirsiniz.
Ayrıca videoyu web sitesinden bilgisayarınıza kaydedebilir ve kodek, bit hızı ve diğer parametreleri örneğin MediaInfo veya benzeri programlarla kontrol edebilirsiniz.
Bu soru hala çok fazla görüş aldığından, bazı güncel bilgiler eklemek istedim. Şimdiye kadar, tüm modern tarayıcılar MP4'ü (MPEG-4 / H.264) desteklemektedir ve çoğu proje için sadece MP4 sunacak kadar uzun bir süredir kullanılmaktadır. Projenizin desteklemesi gereken tüm tarayıcıların MP4 oynatabildiğinden emin olmak için yukarıdaki bağlantıya bir tarayıcı uyumluluk tablosu bakın. Daha az tarayıcı tarafından desteklendiğinden, MP3 için değil, ses parçası için AAC kullanmayı unutmayın.
Yine de, bir WebM videosunu ilk olarak sunabilirsiniz ve sunmalısınız <source>, çünkü daha iyi sıkıştırma özelliği vardır, böylece sınırlı bir veri planındaki kullanıcılar size teşekkür edecektir. Sadece disk alanı, render zamanı veya WebM'yi sunmayı zorlaştıran başka bir değişken açısından sınırlıysanız, MP4'ün şu an ihtiyacınız olan tek şey olduğunu eklemek istedim.
Ayrıca, orijinal yanıtım sesle ilgili bir şey içerdiğinden, kesinlikle ilgili olmayan bir ek paket: Tarayıcı satıcıları otomatik oynatılan videolarda (sayfa yüklendikten sonra, kullanıcı etkileşimi olmadan otomatik olarak oynatmaya başlayan video), özellikle video ses içeriyorsa . Örneğin, Safari yalnızca videoda ses parçası yoksa veya videonun sesi kapatıldığında ( öğedeki karşılık gelen özniteliği kullanarak) otomatik oynatılan videolara izin verir<video> . Ses parçasına ihtiyacınız yoksa, videonuzu bir tane olmadan dışa aktarın (sesle otomatik oynatılan videolar zaten iğrenç UX'tur). Sese ihtiyacınız varsa, bazı tarayıcıların otomatik oynatmayı engelleyeceğini unutmayın, bu nedenle poster özelliğini kullanarak bir yer tutucu resim eklediğinizden emin olun .
MoritzLost'un dediği gibi, aşağı ölçek. Belki ilgilenen insanlar için tam kaliteli sürümüne bir bağlantı koyun. Düşük rez ayrıca istemci tarafında kaynak kullanımını da azaltır. İçeriğe ve sayfanızın metninin arkasında ne kadar görünür olacağına bağlı olarak 640p, 576p ve hatta 480p'ye küçültme bile iyi olabilir.
Ayrıca, sitenizi ziyaret eden HERKES bu videoyu yükleyeceğinden, bit hızı başına olabildiğince fazla kaliteyi sıkmak için ekstra sorun almaya değer. Esp. videoyu çok sık değiştirmeyi planlamıyorsanız. H.264 için bu, kayıpsız bir kaynağı önceden ayarlanmış = , (veya 2 geçişli bit hızı hedefi) ile x264'e beslemek anlamına gelir . x264 en iyi h.264 kodlayıcıdır. (çeşitli h.264 kodlayıcıların bağımsız olarak test edilmesi bunu doğrulamıştır.) Yeterli CPU zamanı verildiğinde, iyi görünen gerçekten küçük bir dosya yapmanın yollarını bulmak için çok akıllı algoritmalar vardır. (Gerekirse hızlı çalışabilir, ancak kodlama süresi bu kullanım durumu için gerçekten önemli değildir: bir kez kodlayın, BİRÇOK kez indirin ve oynayın.)veryslowcrf = 26
Sayfanız yüklendiğinde varsayılan olarak ses çalmayın. Umarım aklı başında insanlar bunu zaten biliyor, ama MoritzLost ses hakkında konuşuyordu. Ses otomatik olarak çalınan sayfalar geniş ölçüde nefret eder ve kötü olarak kabul edilir.
Videonun tam kaliteli bir sürümüne bağlantınız varsa, buna ses ekleyebilirsiniz. 96kb / s, AAC stereo'nun mükemmel ses çıkarması için yeterlidir. 64kb / s hala iyi görünüyor. (kötü bir kodlayıcı kullanmadığınız sürece, örneğin ffmpeg içindeki herhangi bir şey libfdk-aac.
Paypal'ın videosuna bir göz attım. (sayfa bilgisini görüntüle -> medya -> videoyu bul -> farklı kaydet).
mediainfo çıktı:
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
Bu yüzden Handbrake ile x264 kullandılar, ancak oran-bozulma dengesine karşı uygun bir CPU zamanı seçmeyi emiyorlar. önayar ref=1,me=hex,subme=2gibi görünüyor veryfast. ( x264 --fullhelpher ön ayarın nasıl farklı olduğunu görmek mediumiçin her şey için varsayılan ayarları kullanır.) Neyse ki onlar için varsayılan crf 23kalite ayarı kullanım durumları için doğru. Crf23'ten aldıkları 1273kb / s'den başka bir% 20 bit hızı tahmin edebilirdim veryslow, hatta daha iyi ayarları kullanarak , ya da sadece mediumveya slow.
Ayrıca, bazı eski Android / iOS cihazlarla uyumluluk için kendilerini h.264 Ana profil ile sınırlamaya karar verdiler, sanırım hala iyi bir fikir. ( --profile Main). Kalite için gerekenden daha fazla bit hızı kullanan video bir tür evcil hayvan hissi, bu yüzden insanlar hala Baseline profil kodlarını dağıtıyor. Ana profil 8x8dct kullanamaz, bu da biraz acı verir, ancak en azından mutlak rez / bit hızı / diğer ayarlardan bağımsız olarak CAVLC'ye kıyasla yaklaşık% 15 bit hızı kaydetmek için CABAC'ı kullanabilir.
HTML5 video ile bir Taban Çizgisi, Ana ve Yüksek profil akışının kullanılabilmesi için IDK. Mp4 ve webm alternatiflerine sahip olabileceğinizi biliyorum, ama bunlar sadece kaplar.
MoritzLost'un söylediği her şeye katılıyorum .
Premiere pro'daki değerlerin ayarlanmasına yardımcı olmak için dışa aktarma penceresi ayarlarının ekran görüntüsünü eklemek istedim.
Dışa aktarma ekranını açmak için genellikle command-M (Mac) tuşuna basarım ve aşağıda gördüğünüz gibi ayarlayacağım.
Dikkat edilmesi gereken önemli ayar Bitrate ayarları, 1Mbps VBR olarak ayarlayacağım ve belirli bir zamanda çok fazla etkinlik alan sahneler için 2.4'e kadar izin verirdim.
1 MB dosya boyutunu hedeflemeye çalışın. (Paypal'ın sendmoney videosu 13 saniye 1,2 MB, ses yok)
