Voglio creare un sito Web con uno sfondo video HTML5.
Ho una breve clip mp4 1080p che voglio usare (20s). Intendo eseguire il video in un formato letterbox (5: 2 ish), a schermo intero dietro il contenuto della pagina (ad esempio consultare il sito Web di Paypal: https://www.paypal.com/uk/webapps/mpp/home )
Quali sarebbero le migliori impostazioni di esportazione in Premiere CC per questo scopo?
Risposte:
Dovresti esportare più versioni per adattarle a browser diversi. Con HTML5, puoi offrire diverse versioni del video e il browser sceglierà automaticamente il primo supportato. Ad esempio, dai un'occhiata al codice sorgente del sito web paypal a cui ti riferivi:
<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>
Come puoi vedere, offrono sia una versione mp4 (codec H264) sia una versione webm del video. Quelle sarebbero buone opzioni anche per te.
Inoltre, dovresti provare a mantenere i video il più piccoli possibile, in modo che anche i visitatori del sito con Internet lento possano guardarli. A tale scopo, è necessario esportare il video con 720p anziché 1080p (nessuno vedrà la differenza, soprattutto se il video è in background) e puntare a un bitrate inferiore a 1 Mbit / s. Ad esempio, il video paypal utilizza un bitrate di circa 700 Kbit / s. Se non è necessario l'audio, è possibile esportare senza audio o con un bitrate audio basso, ovvero 96 Kbit / s.
Puoi anche salvare il video dal sito Web sul tuo computer e controllare il codec, il bitrate e altri parametri, ad esempio con MediaInfo o programmi simili.
Poiché questa domanda sta ancora ottenendo molte visualizzazioni, volevo aggiungere alcune informazioni aggiornate. Ormai, tutti i browser moderni supportano MP4 (MPEG-4 / H.264) e sono stati per un tempo abbastanza lungo che starai bene offrendo solo MP4 per la maggior parte dei progetti. Controlla il link sopra per una tabella di compatibilità del browser per assicurarti che tutti i browser che il tuo progetto deve supportare possano riprodurre MP4. Ricorda di utilizzare AAC per la traccia audio, non MP3, poiché è supportato da un minor numero di browser.
Tuttavia, puoi e dovresti offrire un video WebM come primo <source>, poiché presenta una compressione migliore, quindi gli utenti con un piano dati limitato ti ringrazieranno. Volevo solo aggiungere che se sei limitato in termini di spazio su disco, tempo di rendering o qualche altra variabile che rende difficile offrire WebM, MP4 è tutto ciò che ti serve ora.
Inoltre, poiché la mia risposta originale includeva qualcosa sull'audio, un altro da asporto non strettamente correlato: i fornitori di browser stanno analizzando i video di riproduzione automatica (video che iniziano a essere riprodotti automaticamente dopo aver caricato la pagina, senza l'interazione dell'utente), soprattutto se il video contiene audio . Ad esempio, Safari consentirà i video con riproduzione automatica solo se il video non contiene traccia audio o il video è disattivato (utilizzando l'attributo corrispondente <video>sull'elemento). Quindi, se non hai bisogno della traccia audio, esporta il tuo video senza uno (la riproduzione automatica dei video con audio è comunque fastidiosa UX). E se hai bisogno dell'audio, tieni presente che alcuni browser bloccheranno la riproduzione automatica, quindi assicurati di includere un'immagine segnaposto usando l' attributo poster .
Come dice MoritzLost , downscale. Forse metti un link da qualche parte alla versione di alta qualità per le persone che sono interessate. Un rez inferiore ridurrà anche l'utilizzo delle risorse sul lato client. Anche il ridimensionamento a 640p, 576p o addirittura 480p potrebbe essere buono, a seconda del contenuto e di quanto sarà visibile dietro il testo della tua pagina.
Inoltre, poiché TUTTI coloro che visitano il tuo sito caricheranno questo video, vale la pena prenderti ulteriori problemi per assicurarti di ottenere la massima qualità per bitrate possibile. Esp. se non hai intenzione di cambiare il video molto spesso. Per h.264, ciò significa alimentare una sorgente senza perdita a x264 con target preset = veryslow, crf = 26(o target bitrate a 2 passaggi). x264 è il miglior codificatore h.264. (questo è stato confermato dai test indipendenti di vari codificatori h.264). Ha molti algoritmi davvero intelligenti per trovare il modo di creare un file davvero piccolo che abbia un bell'aspetto, dato il tempo sufficiente della CPU. (E può funzionare veloce se necessario, ma codificare il tempo non è davvero rilevante per questo caso d'uso: codifica una volta, scarica e gioca MOLTE volte.)
NON riprodurre l'audio per impostazione predefinita quando la pagina viene caricata. Speriamo che la gente già sana lo sappia, ma MoritzLost parlava dell'audio. Le pagine che riproducono automaticamente l'audio sono ampiamente detestate e considerate malvagie.
Se si dispone di un collegamento a una versione di alta qualità del video, è possibile includere l'audio con quello. 96kb / s sono sufficienti per un suono stereo AAC eccellente. 64kb / s suonerà comunque bene. (purché non utilizzi un codificatore errato, ad esempio qualsiasi cosa in ffmpeg diversa da libfdk-aac.
Ho dato un'occhiata al video di paypal. (visualizza le informazioni sulla pagina -> media -> trova il video -> salva con nome).
mediainfo produzione:
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
Quindi hanno usato x264 tramite freno a mano, ma fanno schifo nella scelta di un adeguato compromesso tra tempo di CPU e velocità di distorsione. ref=1,me=hex,subme=2sembra il veryfastpreset. ( x264 --fullhelpper vedere come si differenzia ogni preset medium, che utilizza le impostazioni predefinite per tutto.) Fortunatamente per loro, l'impostazione di crf 23qualità predefinita è adatta al loro caso d'uso. Avrebbero potuto risparmiare immagino che un altro bitrate del 20% dai 1273kb / s ottenuti da crf23 usando impostazioni migliori, come veryslow, o anche solo mediumo slow.
Hanno anche deciso di limitarsi al profilo principale h.264, per compatibilità con alcuni vecchi dispositivi Android / iOS, che purtroppo è ancora una buona idea, immagino. ( --profile Main). Il video che utilizza più bitrate del necessario per la qualità è una specie di pipì per animali domestici, quindi mi dà davvero fastidio il fatto che le persone distribuiscano ancora codifiche del profilo Baseline. Il profilo principale non può usare 8x8dct, il che fa abbastanza male, ma almeno può usare CABAC per risparmiare circa il 15% di bitrate rispetto a CAVLC, indipendentemente da rez / bitrate assoluti / qualsiasi altra impostazione.
IDK, se è possibile con video HTML5, disporre di un flusso di base, principale e alto profilo disponibili. So che puoi avere alternative a mp4 e webm, ma questi sono solo contenitori.
Sono praticamente d'accordo con tutto ciò che MoritzLost sta dicendo .
Volevo solo aggiungere una schermata delle impostazioni della finestra di esportazione per aiutare a impostare i valori su Premiere Pro.
Di solito premo command-M (Mac) per visualizzare la schermata di esportazione E la imposterò come vedi sotto.
L'impostazione importante da notare sono le impostazioni Bitrate, la impostarei su VBR a 1 Mbps e consentirei fino a 2,4 per le scene che svolgono molta attività in un determinato momento.
Prova a puntare a una dimensione di file di 1 MB. (Il video sendmoney di Paypal è stato di 1,2 MB per 13 secondi, senza audio)
