1

Quiero que en mi web aparezca un video de unos 20-30segundos en bucle fullscreen. Lo he descargado en shutterstock en calidad hd, ahora mismo pesa 200mb. Lo que no sé es que características tiene que tener el video para estar optimizado al 100% para que cargue lo más rapido posible y no pierda excesiva calidad.

¿Existe alguna herramienta gratuita para hacer esto?

<video autoplay muted loop id="myVideo" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  Your browser does not support HTML5 video.
</video>

*Nota: he colocado un video de prueba ahora mismo.

1
  • 1
    Esta pregunta está en la línea de los temas permitidos y los que no. Realmente no es sobre programación sino sobre diseño y presenta cierto grado de subjetividad, varios programadores pueden darte diferentes respuestas igualmente válidas y contradictorias. Las etiquetas de JavaScript y HTML realmente no aplican (JavaScript definitivamente no, HTML es tangencial). Y la parte pidiendo herramientas no se ajusta bien a la temática y formato del sitio. Lee Cómo preguntar y ¿Sobre qué temas puedo preguntar aquí? para más información.
    – Alvaro Montoro
    Commented el 13 jul. 2018 a las 12:33

1 respuesta 1

1

'Cuanto más calidad mejor'. Pero...

Piensa siempre en las personas a las que vas a dirigirte. Quizás no todas tengan fibra o banda ancha.

Asume una 'velocidad media' de descarga para estas personas y utiliza este valor como bitrate del vídeo.

Considera también que la velocidad a la que sirve el servidor puede ser menor que la velocidad de descarga que vas a suponer.

Además un usuario no estará únicamente descargando el vídeo. También estará descargando el resto de la página web.

A la hora de codificar el vídeo, utiliza la velocidad de descarga supuesta (por ejemplo 3Mbps) como bitrate del vídeo.

Para asegurarte de que no te sales del bitrate que quieres utilizar, tienes dos opciones:

  1. Codificar un vídeo con un bitrate fijo. Es más rápido para procesar pero tiene peor calidad
  2. Utilizar un sistema de '2 pasadas': Conseguirás el bitrate deseado con la máxima calidad (para ese bitrate) a costa de un mayor tiempo de procesado.

Una utilidad para codificar vídeos gratuita es https://handbrake.fr/

Además, ten en cuenta que deberías codificar el vídeo en varios formatos/contenedores (mp4, webm, ogv) para conseguir la mayor compatibilidad posible.

Finalmente, para ayudarte a elegir qué bitrate utilizar, te paso esta página donde se especifican los diferentes bitrates utilizados por youtube dependiendo del vídeo utilizado:

https://support.google.com/youtube/answer/2853702?hl=es

Aunque sería algo más conservador que estos valores porque: primero: seguramente no tengas los mismos servidores que google :), y segundo: un vídeo siempre puedes pausarlo y esperar a que cargue un poco. Pero en una página web la experiencia es distinta.

2
  • Gracias, buscaba algo de información técnica como colocar un video como fondo ya que hay excasa información en internet. Lo he hecho tal y como he puesto en el post y lo he convertido a webm y ogg en esta web: online-convert.com/es Si alguien tiene más información sobre esto seria de utilidad :) Commented el 16 jul. 2018 a las 11:25
  • 1
    Básicamente esa es la idea, pero tú deberás decidir el compromiso que haces entre calidad (bitrate) vs tiempo de carga. Si la calidad que has conseguido con esa web es buena y los tiempos de carga también lo son, no me preocuparía más. Si los tiempos de carga no terminan de ser buenos para tí (y es por culpa de vídeo), utilizaría lo que te he comentado para intentar optimizar el vídeo (utilizar un bitrate más bajo). Comentar también que la mayoría de codificadores de vídeo permiten ciertos parámetros para no perder tanta calidad bajando el bitrate a costa de un mayor tiempo de procesado.
    – Julio
    Commented el 16 jul. 2018 a las 12:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.