Quiero crear un sitio web con un fondo de video HTML5.
Tengo un clip corto de 1080p mp4 que quiero usar (20s). Tengo la intención de ejecutar el video en formato de buzón (5: 2 ish), pantalla completa detrás del contenido de la página (por ejemplo, consulte el sitio web de Paypal: https://www.paypal.com/uk/webapps/mpp/home )
¿Cuál sería la mejor configuración de exportación en Premiere CC para este propósito?
Debe exportar varias versiones para acomodar diferentes navegadores. Con HTML5, puede ofrecer diferentes versiones del video y el navegador elegirá automáticamente la primera que sea compatible. Por ejemplo, eche un vistazo al código fuente del sitio web de PayPal al que se refirió:
<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 puede ver, ofrecen un mp4 (códec H264) y una versión webm del video. Esas también serían buenas opciones para ti.
Además, debe tratar de mantener los videos lo más pequeños posible, para que los visitantes del sitio con Internet lento también puedan verlo. Para ese propósito, debe exportar el video con 720p en lugar de 1080p (nadie verá la diferencia, especialmente si el video está en segundo plano) y apunte a una tasa de bits inferior a 1 Mbit / s. Por ejemplo, el video de PayPal utiliza una tasa de bits de aproximadamente 700 Kbit / s. Si no necesita el audio, puede exportar sin audio o con una tasa de bits de audio baja, es decir, 96 Kbit / s.
También puede guardar el video del sitio web en su computadora y verificar el códec, la tasa de bits y otros parámetros, por ejemplo, con MediaInfo o programas similares.
Dado que esta pregunta todavía está obteniendo muchas vistas, quería agregar información actualizada. Por ahora, todos los navegadores modernos son compatibles con MP4 (MPEG-4 / H.264), y lo han sido por un tiempo lo suficientemente largo como para que esté bien ofreciendo solo MP4 para la mayoría de los proyectos. Consulte el enlace de arriba para ver una tabla de compatibilidad del navegador para asegurarse de que todos los navegadores que su proyecto necesite admitir puedan reproducir MP4. Recuerde utilizar AAC para la pista de audio, no MP3, ya que es compatible con menos navegadores.
Aún así, puede y debe ofrecer un video WebM como el primero <source>, ya que presenta una mejor compresión, por lo que los usuarios con un plan de datos limitado se lo agradecerán. Solo quería agregar que si está limitado en términos de espacio en disco, tiempo de renderizado o alguna otra variable que hace que sea difícil ofrecer WebM, MP4 es todo lo que necesita ahora.
Además, dado que mi respuesta original incluía algo sobre el audio, una conclusión adicional que no está estrictamente relacionada: los proveedores de navegadores están tomando medidas enérgicas contra los videos de reproducción automática (video que comienza a reproducirse automáticamente después de cargar la página, sin interacción del usuario), especialmente si el video contiene audio . Por ejemplo, Safari solo permitirá la reproducción automática de videos si el video no contiene una pista de audio o si el video está silenciado (usando el atributo correspondiente en el <video>elemento). Entonces, si no necesita la pista de audio, exporte su video sin una (la reproducción automática de videos con audio de todos modos es desagradable para UX). Y si necesita el audio, tenga en cuenta que algunos navegadores bloquearán la reproducción automática, así que asegúrese de incluir una imagen de marcador de posición utilizando el atributo poster .
Como dice MoritzLost , de baja escala. Tal vez ponga un enlace en algún lugar a la versión de calidad completa para las personas que estén interesadas. Menor rez también reducirá el uso de recursos en el lado del cliente. Incluso reducir la escala a 640p, 576p o incluso 480p podría ser bueno, dependiendo del contenido y de cuán visible estará detrás del texto de su página.
Además, dado que TODOS los que visiten su sitio cargarán este video, vale la pena tomarse más problemas para asegurarse de obtener la mayor calidad posible por bitrate. Esp. si no planeas cambiar el video con mucha frecuencia. Para h.264, eso significa alimentar una fuente sin pérdidas a x264 con preestablecido = veryslow, crf = 26(u objetivo de velocidad de bits de 2 pasadas). x264 es el mejor codificador h.264. (las pruebas independientes de varios codificadores h.264 han confirmado esto). Tiene muchos algoritmos realmente inteligentes para encontrar formas de hacer un archivo realmente pequeño que se vea bien, dado el tiempo suficiente de CPU. (Y puede ejecutarse rápidamente si lo necesita, pero el tiempo de codificación no es realmente relevante para este caso de uso: codifique una vez, descargue y reproduzca MUCHAS veces).
NO reproduzca audio de forma predeterminada cuando se cargue su página. Espero que la gente sensata ya lo sepa, pero MoritzLost estaba hablando de audio. Las páginas que reproducen automáticamente el audio son ampliamente odiadas y consideradas malvadas.
Si tiene un enlace a una versión de calidad completa del video, puede incluir audio con eso. 96kb / s es suficiente para que el estéreo AAC suene excelente. 64kb / s todavía sonará bien. (siempre y cuando no use un codificador defectuoso, por ejemplo, cualquier cosa en ffmpeg que no sea libfdk-aac.
Eché un vistazo al video de PayPal. (ver información de la página -> medios -> buscar el video -> guardar como).
mediainfo salida:
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 lo tanto, utilizaron x264 a través de Handbrake, pero apestan a la hora de elegir una compensación adecuada de tiempo de CPU frente a distorsión de velocidad. ref=1,me=hex,subme=2se parece al veryfastpreajuste. ( x264 --fullhelppara ver cómo difiere cada valor predeterminado medium, que utiliza la configuración predeterminada para todo). Afortunadamente para ellos, la configuración de crf 23calidad predeterminada es la adecuada para su caso de uso. Podrían haber ahorrado, supongo que otro 20% de velocidad de bits de los 1273 kb / s que obtuvieron de crf23 mediante el uso de mejores configuraciones, como veryslow, o incluso simplemente mediumo slow.
También decidieron limitarse al perfil principal h.264, por compatibilidad con algunos dispositivos Android / iOS más antiguos, lo que lamentablemente sigue siendo una buena idea, supongo. ( --profile Main) El video que usa más bitrate del necesario para la calidad es una especie de motivo favorito, por lo que realmente me molesta que la gente todavía distribuya codificaciones de perfil de línea de base. El perfil principal no puede usar 8x8dct, lo que también duele bastante, pero al menos puede usar CABAC para ahorrar aproximadamente un 15% de tasa de bits frente a CAVLC, independientemente de la configuración absoluta de tasa de bits / rez / cualquier otra.
IDK si es posible con video HTML5 tener una transmisión de línea de base, principal y de perfil alto disponible. Sé que puedes tener alternativas mp4 y webm, pero esos son solo contenedores.
Estoy bastante de acuerdo con todo lo que dice MoritzLost .
Solo quería agregar una captura de pantalla de la configuración de la ventana de exportación para ayudar a configurar los valores en Premiere Pro.
Usualmente presiono el comando-M (Mac) para que aparezca la pantalla de exportación Y lo configuraría como se ve a continuación.
La configuración importante a tener en cuenta es la configuración de Bitrate, lo establecería en 1Mbps VBR, y permitiría hasta 2.4 para escenas que obtienen mucha actividad en un momento particular.
Intenta apuntar a un tamaño de archivo de 1 MB. (El video sendmoney de Paypal fue de 1.2MB por 13 segundos, sin audio)
