Quero criar um site com um plano de fundo de vídeo HTML5.
Eu tenho um clipe mp4 curto de 1080p que eu quero usar (20s). Pretendo executar o vídeo em formato letterbox (5: 2 ish), em tela cheia atrás do conteúdo da página (por exemplo, consulte o site do Paypal: https://www.paypal.com/uk/webapps/mpp/home )
Quais seriam as melhores configurações de exportação no Premiere CC para essa finalidade?
Você deve exportar várias versões para acomodar diferentes navegadores. Com o HTML5, você pode oferecer versões diferentes do vídeo e o navegador selecionará automaticamente o primeiro suportado. Por exemplo, dê uma olhada no código-fonte do site paypal ao qual você se referiu:
<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>
Como você pode ver, eles oferecem uma versão para mp4 (codec H264) e para webm. Essas seriam boas opções para você também.
Além disso, você deve tentar manter os vídeos o menor possível, para que os visitantes do site com Internet lenta também possam assisti-lo. Para esse fim, você deve exportar o vídeo com 720p em vez de 1080p (ninguém verá a diferença, principalmente se o vídeo estiver em segundo plano) e buscar uma taxa de bits abaixo de 1 Mbit / s. Por exemplo, o vídeo paypal usa uma taxa de bits de cerca de 700 Kbit / s. Se você não precisar do áudio, poderá exportar sem áudio ou com uma taxa de bits baixa, ou seja, 96 Kbit / s.
Você também pode salvar o vídeo do site no seu computador e verificar o codec, taxa de bits e outros parâmetros, por exemplo, com o MediaInfo ou programas similares.
Como essa pergunta ainda está recebendo muitas visualizações, eu gostaria de adicionar algumas informações atualizadas. Até agora, todos os navegadores modernos suportam MP4 (MPEG-4 / H.264), e já faz tempo que você pode oferecer apenas MP4 para a maioria dos projetos. Verifique o link acima para uma tabela de compatibilidade do navegador para garantir que todos os navegadores que seu projeto precisa oferecer suporte possam reproduzir MP4. Lembre-se de usar o AAC para a faixa de áudio, não para o MP3, pois ele é suportado por menos navegadores.
Ainda assim, você pode e deve oferecer um vídeo WebM como o primeiro <source>, uma vez que apresenta melhor compactação, para que os usuários de um plano de dados limitado o agradeçam. Eu só queria acrescentar que, se você está limitado em termos de espaço em disco, tempo de renderização ou alguma outra variável que dificulta a oferta do WebM, o MP4 é tudo o que você precisa agora.
Além disso, como minha resposta original incluía algo sobre áudio, outra sugestão que não está estritamente relacionada: os fornecedores de navegadores estão reprimindo os vídeos de reprodução automática (vídeo que começa a ser reproduzido automaticamente após o carregamento da página, sem a interação do usuário), especialmente se o vídeo contiver áudio . Por exemplo, o Safari só permitirá vídeos de reprodução automática se o vídeo não contiver faixa de áudio ou se o vídeo estiver mudo (usando o atributo correspondente no <video>elemento). Portanto, se você não precisar da faixa de áudio, exporte seu vídeo sem uma (vídeos de reprodução automática com áudio são UX desagradáveis de qualquer maneira). E se você precisar do áudio, lembre-se de que alguns navegadores bloquearão a reprodução automática; inclua uma imagem de espaço reservado usando o atributo de pôster .
Como MoritzLost diz , em escala reduzida. Talvez coloque um link em algum lugar da versão de qualidade total para as pessoas interessadas. Reduzir a rez também reduzirá o uso de recursos no lado do cliente. Mesmo a redução de escala para 640p, 576p ou 480p pode ser boa, dependendo do conteúdo e de quão visível ainda estará atrás do texto da sua página.
Além disso, como TODOS os que visitam seu site carregam este vídeo, vale a pena dar um trabalho extra para garantir a qualidade por taxa de bits possível. Esp. se você não planeja alterar o vídeo com muita frequência. Para h.264, isso significa alimentar uma fonte sem perdas com x264 com predefinição = veryslow, crf = 26(ou destino de taxa de bits de 2 passagens). O x264 é o melhor codificador h.264. (o teste independente de vários codificadores h.264 confirmou isso.) Ele possui muitos algoritmos realmente inteligentes para encontrar maneiras de criar um arquivo muito pequeno que pareça bom, com tempo de CPU suficiente. (E pode ser executado rapidamente, se necessário, mas o tempo de codificação não é realmente relevante para este caso de uso: codifique uma vez, faça o download e reproduza MUITAS vezes.)
NÃO reproduza áudio por padrão quando sua página for carregada. Espero que as pessoas sãs já saibam disso, mas MoritzLost estava falando sobre áudio. As páginas que reproduzem automaticamente o áudio são amplamente odiadas e consideradas más.
Se você tiver um link para uma versão de qualidade total do vídeo, poderá incluir áudio. 96kb / s é suficiente para que o estéreo AAC pareça excelente. 64kb / s ainda soará bem. (desde que você não use um codificador incorreto, por exemplo, qualquer coisa no ffmpeg que não seja libfdk-aac.
Eu dei uma olhada no vídeo do paypal. (veja informações da página -> mídia -> encontre o vídeo -> salvar como).
mediainfo resultado:
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 : [email protected]
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
Por isso, eles usaram o x264 via Handbrake, mas eles são péssimos ao escolher uma troca apropriada entre tempo de CPU e distorção de taxa. ref=1,me=hex,subme=2parece com a veryfastpredefinição. ( x264 --fullhelppara ver como cada predefinição difere medium, que usa as configurações padrão para tudo.) Felizmente para eles, a crf 23configuração de qualidade padrão é a mais adequada para seus casos de uso. Eles poderiam ter economizado, eu acho que outros 20% de taxa de bits dos 1273kb / s que eles obtiveram do crf23 usando configurações melhores, como veryslow, ou mesmo apenas mediumou slow.
Eles também decidiram se limitar ao perfil principal h.264, compatível com alguns dispositivos Android / iOS mais antigos, o que infelizmente ainda é uma boa ideia, eu acho. ( --profile Main) O vídeo que usa mais taxa de bits do que o necessário para a qualidade é meio que irritante, por isso realmente me incomoda que as pessoas ainda distribuam os códigos de perfil da Linha de Base. O perfil principal não pode usar 8x8dct, o que também dói bastante, mas pelo menos ele pode usar o CABAC para economizar cerca de 15% de taxa de bits vs. CAVLC, independentemente de rez / taxa de bits absoluta / quaisquer outras configurações.
IDK, se for possível com o vídeo HTML5, ter um fluxo de perfil de linha de base, principal e alto disponível. Eu sei que você pode ter alternativas mp4 e webm, mas essas são apenas contêineres.
Eu praticamente concordo com tudo o que MoritzLost está dizendo .
Eu só queria adicionar uma captura de tela das configurações da janela de exportação para ajudar na definição dos valores no Premiere Pro.
Normalmente eu pressiono o comando-M (Mac) para abrir a tela de exportação E eu a configuraria como você vê abaixo.
A configuração importante a ser observada são as configurações de taxa de bits, eu a configuraria para 1 Mbps VBR e permitiria até 2,4 para cenas que recebem muita atividade em um determinado momento.
Tente apontar para um tamanho de arquivo de 1 MB. (O vídeo sendmoney do Paypal foi de 1,2 MB por 13 segundos, sem áudio)
