Codificación de vídeo en HTML5

1. Principios Básicos
2. Códecs Recomendadas
3. Software de codificación
4. Vídeo móvil
5. .¿Que vídeo deben ser recodificados?

Principios básicos de la codificación de vídeo para la web

Al codificar para la web, no te olvides que siempre permanece dependiente tanto el ancho de banda de salida de su servidor y la velocidad de entrada de la conexión a Internet del espectador. El más pequeño puede hacer sus archivos, los mayores sus posibilidades de reproducción suave.

Con el objetivo de perfecta calidad de reproducción sólo puede resultar en vídeo entrecortado. El primer lugar para recortar el tamaño del archivo es con la resolución. Cuanto menos píxeles que tienen que comprimen, menor será su archivo. No tiene sentido en la toma de su vídeo más grande que la ventana de dispositivos. Las dos primeras generaciones de iPads tenían sólo 1024 x 768 pantallas. El más lo que necesitan es 960px x 540px. Una vez que hayas elegido el tamaño de destino correcto – hacer sus espectadores realmente necesitan ver que usted habla en 1080p Full HD o incluso 1280 x 720 píxeles de 720p – el próximo gran obstáculo es la tasa de bits. Desea establecer bitrate tan bajo como sea posible, manteniendo la calidad.

• Que tipo de tasa de bits a utilizar dependerá del tamaño y el contenido. Escenas de mucho movimiento requieren bitrates muy superiores para que no se corte. VBR (Variable Bit Rate) se creó para hacer frente a estas cuestiones. VBR toma más tiempo para codificar, pero produce resultados más limpios. VBR es más comúnmente utilizado para la entrega http si el contenido de vídeo (http progresivo).
• Por otro lado, no utilice Variable Frame Rate. Se romperá el vídeo en la mayoría de los dispositivos o plataformas. Elija siempre constante velocidad de fotogramas.
• Si el vídeo de entrada esta entrelazado, usar el filtro para desentrelazar antes de codificarlo.
• Si el vídeo de entrada no tiene una relación de muestra de 1/1 (píxeles cuadrados), aplica un filtro para hacer cumplir una relación de muestra de 1/1

Si el vídeo original tiene una relación de aspecto de 16/9 , mantén las advertencias anteriores en mente que podrían codificar en:

• una resolución de 960×540 píxeles
• una tasa de bits de vídeo promedio entre 1500 y 4000 kilobits por segundo
• una tasa de bits de audio promedio entre 96 y 192 kilobits por segundo

Para obtener la mejor calidad del video en la web, tendrá que experimentar con la configuración de codificación hasta que lo haga bien para que se ajuste a sus necesidades. Le recomendamos crear un clip corto con diferentes muestras de cortos de su material de origen para probar hasta que te salga a la perfección. En la parte inferior del artículo, le daremos algunas capturas de pantalla de lo que consideramos ser buenos ajustes para el HandBrake. Usted las puede utilizar para otros programas también. No te olvides de encender la codificación 2-pass mientras que casi siempre dan mejores resultados para un poco más de tiempo que codifica la primera vez.

Codecs

MP4, WEBM y OGG son los contenedores para los siguientes códecs de vídeo y audio:

Contenedor	códec de vídeo	códec de audio
MP4	H.264 también conocido comoMPEG-4 AVC o MPEG-4 Parte 10	AAC
WEBM	VP8	Vorbis
OGG	Theora	Vorbis

No nos cubrimos el MPEG-4 Visual o MPEG-4 Parte 2 codec de vídeo, ya que no es adecuado como repliegue Flash ni tampoco reprodicir con Internet Explorer en el modo HTML5. Para evitar fallos en la reproducción codificar con el más moderno MPEG-4 AVC.

Vídeo Ogg

No es necesario, excepto en algunos pocos casos de los usuarios con navegadores más antiguos, los cuales podrían llegar a no reproducir el video en MP4 en Flash mode. Pero WEBM o MP4 van a funcionar para reproducir los videos tambien. En todo caso, los problemas podrían influir solamente en los usuarios de las versiones antiguas de Firefox u Opera. Considerando que esta gente tampoco mira mucho los videos en Internet, no deberían preocuparse por esto. En todo caso, FV FLowplayer 5 funciona perfectamente con Ogg.

MP4 y metadatos

Vídeos H.264 codificado llevan sus metadatos – la duración, frecuencia de imagen, etc – en el denominado «átomo moov».

Por defecto programas de codificación se inserte el átomo de moov al final del archivo de vídeo que es adecuado para la reproducción de un archivo local en un programa de escritorio. Sin embargo, cualquier tipo de descarga progresiva requiere los metadatos para estar disponible de inmediato para la reproducción inmediata. De lo contrario, el jugador tiene que esperar a que todo el vídeo a descargar antes de que comience la reproducción. Asegúrese de seleccionar una opción en su programa de transcodificación que pone el átomo moov en el principio del archivo!

En caso de que usted ya tiene una gran cantidad de videos MP4 con el átomo moov al final del archivo, utiliza un programa dedicado como QTIndexSwapper orMOOV Relocator para moverlo al principio.

MP4 para iOS y dispositivos móviles

MPEG-4 AVC es un potente codec que permite la compresión muy eficaz en varios perfiles y niveles. Como los perfiles más altos y los niveles están descifrando intensiva, que no son compatibles con dispositivos móviles para aliviar su carga de trabajo del procesador.

Echemos iOS como ejemplo: Hasta los últimos iPads sólo reproducir vídeos codificados en H.264 perfil principal Nivel 3.1. Pero si quiere atender a la audiencia más amplia que incluye a los espectadores con iPhones y iPods y generación del iPad 1, así como mayores iOS versiones usted debe pegarse con:

• Perfil de línea de base
• Nivel 3.0
• 1 sistema de referencia
• Tasa de bits máxima limitada a 1,5 veces la tasa de bits media, pero no más de 10.000 kilobits por segundo.
• Tamaño del búfer de 5 veces la tasa de bits máxima, pero no más de 10 000 kilobits.
• La resolución máxima de 640×480 px

Software de codificación

Si bien gran parte de los mejores software libre se basa en la fuente abierta FFmpeg programa, se recomienda utilizar una interfaz gráfica para FFmpeg, como HandBrake (Windows, Linux, OS X) o ffmpegX (para OS X). Hay programas de transcodificación de alto precio alrededor de los cuales son a menudo muy capaz, pero que es probable que no necesitan para la codificación web básico.

Aquí hay algunas capturas de pantalla con la configuración recomendada

Muestra de codificación MP4

HandBrake – seguro iPhone3GS iPad ajustes HQ

Estos ajustes jugar perfectamente en la generación del iPad, así como una mayor edad solo procesador Android 2.3.3 Gingerbread teléfonos como el HTC Desire. Y se ven bien en el escritorio. Puede ahorrar espacio sustancial y obtener un comienzo más rápido al reducir la tasa de bits, pero si lo hace, la calidad de imagen degenera rápidamente. Perfil de vídeo de alta y H.264 Nivel looking 4 dan mejor en bitrates bajos, pero va a ser muy nervioso en / teléfonos Android más débiles de esa edad o mayores dispositivos iOS (iPhone 3GS, iPad 1). Los ajustes anteriores son los seguros para un único códec a través de diferentes dispositivos.

Si desea que el vídeo se ven mejor en pantalla completa, utilice la resolución 1280×720 píxeles y cambiar los «Promedio Bitrate (kbps)» para 2600. Puede utilizar un poco más bajos números si el vídeo no es tan agudo. En ese caso, asegúrese de seguir las recomendaciones de vídeo móvil.

Preste atención a la pestaña de audio también! Establecer que utilice AAC, asegúrese de que no es «Passthrough Auto». De esta manera el flujo de audio no se volverá a codificar el vídeo y podría no jugar en Internet Explorer y Firefox en Linux.

Selección del Codec flujo de audio derecha

Si ves múltiples flujos, asegúrese de sólo uno estancias corriente!

WEBM muestra de codificación

Puede utilizar FireFogg para WebM Codif aunque la interfaz se ve torpe. En realidad funciona en Firefox como una extensión y utiliza la potencia de procesamiento de su ordenador para la codificación:

Firefogg se ve feo, pero tiene menos ajustes que HandBrake

Los ajustes son similares a las de HandBrake.

Móvil Video

iOS en iPhones mayores para los dispositivos más antiguos tienen un límite de resolución de 640×480 píxeles y la velocidad de conexión es también un problema. Móviles viejos Android (como el HTC Legend) sólo pueden reproducir vídeos de hasta 480×320 píxeles.

1. Es necesario para codificar primero el vídeo para móviles:
   • en la resolución más baja y menor ancho de banda (que sólo puede establecer el ancho de 480px para que sea más rápido cargar en la conexión móvil)
   • asegúrese de usar el perfil h264 «línea de base»
2. A continuación, utilice el campo «video móvil» de nuestro plugin. Habilitar en Configuración -> FV WordPress Flowplayer -> Opciones de la interfaz de correos. Luego, en el editor de código corto obtendrá un campo especial para video móvil.
3. Ese video será servido para cada dispositivo con ancho de pantalla menor que en igual a 320px y la altura más baja que en igual a 480px. Incluso si la pantalla los iPhones más tarde ‘es, en realidad, 640x960px, es verdadero tamaño se calcula como 320x480px ya que es la llamada pantalla «retina».
4. Así que usted puede probar que fuera en el escritorio demasiado dimensionando abajo de la ventana del
   navegador. Esto se hace en JavaScript, por lo que no tiene que preocuparse de WordPress página de caché.

Más sobre Formatos de vídeo

Actualmente 3 principales formatos de vídeo se utilizan en la web.

1. MP4 MP4 da soporte completo navegador cruz con la ayuda de flash
2. WEBM WEBM da soporte de vídeo HTML5 para los últimos navegadores Firefox, Chrome y Opera
3. OGG OGG da soporte de vídeo HTML5 para versiones anteriores de Firefox y Opera

FV Flowplayer 5 también es compatible con HLS (Apple HTTP Live Streaming) de M3U8 archivos.

Navegador	ogg	mp4	webm	m3u8
IE	–	9.0	–	–
Firefox	3.5	–	4.0	–
Cromo	3.0	3.0	6.0	–
Safari	–	3.1	–	6.0
Ópera	10.5	–	10.6	–

Tomado de Wikipedia.

De forma predeterminada FV Flowplayer 5 intentos de utilizar el vídeo HTML5, y si no está apoyada luego Flash (9.0+) y se utiliza MP4. MP4 es suficiente para soporte completo navegador, pero proporcionando WebM y / o vídeo OGG le da un apoyo más amplio para video HTML5, que es la tecnología preferida.También tenga en cuenta que Flash no admite peticiones de rango de bytes, por lo tanto, la búsqueda de azar no funcionará con MP4 en el modo de flash.

Tenga en cuenta que la compatibilidad con exploradores de formatos de vídeo está sujeto a cambios – Chrome tiene la intención de eliminar el soporte MP4, y Firefox planea añadir soporte MP4. Su mejor apuesta para video HTML5 confiable es proporcionar MP4 y WEBM variantes para cada uno de sus vídeos.

Safari en Windows es capaz de reproducir vídeo HTML5 cuando se instala QuickTime.

Apoyo HLS hasta ahora se limita a los flujos bajo demanda a causa de la falta de alternativas de HTML5 vídeo en vivo.

Qué vídeos deben ser re-codificado para una mejor compatibilidad con HTML5?

FLV

Este formato sólo juega en dispositivos compatibles con flash. Así que asegúrese de incluir otra versión del video en formato MP4 para todos los dispositivos iOS y otras personas sin flash.

MOV

Desde formato MOV no se admite oficialmente por HTML5, le recomendamos que vuelva a codificar estos vídeos en MP4.

MOV veces contiene combinaciones de codecs que no son compatibles en todos los navegadores. Vídeos MOV no juegan siempre en todas las versiones del navegador web Google Chrome, incluso si juega bien en todos sus otros navegadores. Seguimos para hacer la investigación activa en caprichos de vídeo de Google Chrome como Chrome /cromo parece ser el más problemático con MOV y MP4 vídeos. Retorno a WebM podría ayudar. Vamos a hacer nuestras propias pruebas. Si alguien tiene una visión específica, por todos los medios ponerse en contacto de inmediato.

RTMP

RTMP no es un formato, sino un protocolo para la transmisión de vídeo efectiva de vídeo Flash. Sólo funciona en dispositivos compatibles con flash. Asegúrese de incluir otra versión de su video en formato MP4 para todos los dispositivos iOS y otras personas sin flash.

3GP

Este es un caso especial – probablemente jugará en iDevices, pero no jugará en los navegadores normales de ordenador si Flash no está instalado, con excepción de Safari.