Introducción
La <video> etiqueta en HTML5 es una gran cosa. Permite la reproducción de video nativa en todos los navegadores actuales, en lugar de depender de un complemento como Flash. Abre la puerta al video web en dispositivos que no son compatibles con Flash y habilita códecs que anteriormente no se podían reproducir en la web.
Pero si publica contenido de video, la compatibilidad con el navegador puede resultar confusa. Para admitir realmente el video web, ¿cuántas versiones de salida necesita crear? WebM, Ogg y MP4? ¿Qué pasa con iPhone o Android? ¿Qué pasa con las versiones de tasa de bits baja / media / alta?
No hay una sola respuesta a esta pregunta, así que aquí hay una breve guía para seleccionar salidas para vídeo HTML5.
Qué web formatos?
Hay tres formatos de video que funcionan de forma nativa en algunos navegadores. Lamentablemente, ningún formato funciona en todos los navegadores, por lo que debe hacer al menos dos si desea un soporte significativo de vídeo HTML5.
Como mínimo, debes usar MP4 + H.264, con AAC o MP3. El video MP4 se reproduce de forma nativa en Safari, Chrome e IE9 (Vista / Windows 7). También es su mejor opción para un respaldo de video Flash y se reproduce de forma nativa en muchos dispositivos (iOS, Android, Blackberry, PSP, Xbox, PS3, etc.). Utilice H.264 High Profile para obtener la mejor calidad o el perfil Baseline si desea que se pueda reproducir el mismo video en dispositivos móviles.
Más allá de eso, use cualquiera WebM + VP8 o Ogg + Theora con audio Vorbis para otros navegadores.
Recomendación: Como mínimo, MP4 + WebM u Ogg, o tal vez ambos.
¿Qué dispositivos móviles?
Nuevamente, no existe un perfil móvil único que funcione en todos los dispositivos móviles. De hecho, existen más estándares diferentes para el video móvil que para la web. Pero, afortunadamente, algunas recetas bien seleccionadas pueden cubrir la mayoría de los dispositivos móviles modernos.
Para obtener todos los detalles, consulte nuestra guía en codificación de video para uso móvil.
1. La mayoría de los dispositivos móviles modernos admiten MP4 / H.264. Esto incluye toda la serie iOS (iPhone, iPod, iPad, Apple TV, etc.), la mayoría de los dispositivos Android, teléfonos Blackberry modernos, etc. Para la mayoría de estos, asegúrese de utilizar el perfil de referencia H.264. Utilice 640x480 o menor para iOS y Android, y 480x360 o menor para compatibilidad con Blackberry.
Tenga en cuenta que el mismo archivo que se reproduce en un iPhone se puede reproducir en la web, a través de HTML5 (algunos navegadores) o Flash. Entonces, si desea reducir las versiones, use la misma. Pero está atascado con el perfil Baseline para la mayoría de los dispositivos móviles, y Main / High marca una gran diferencia, por lo que usar versiones de salida separadas es una buena idea si desea la mejor calidad para cada dispositivo.
2. Utilice 3GP / MPEG4 para dispositivos móviles más antiguos. La mayoría de Blackberrys y algunos Android también admiten 3GP, y 3GP generalmente incluso se reproduce en iPhone/iPod también (ya que iOS reproduce MP4/MPEG-4 y 3GP es solo un subconjunto de MP4).
Recomendación: Como mínimo, MP4, 640x480 o 480x360. Como máximo, tres versiones MP4 (480x360, 640x480, 720p + perfil principal) más una o dos versiones 3GP (320x240 y quizás 176x144). Vea nuestra publicación anterior para configuración de codificación específica.
Varias tasas de bits
¿Debería usar varias velocidades de bits para entregar videos más grandes a usuarios con conexiones rápidas a Internet y videos más pequeños a usuarios con conexiones a Internet más lentas? Si sus usuarios ven videos de alta calidad en la web, probablemente la respuesta sea "Sí". Considere usar 2-3 tamaños y velocidades de bits para lograr esto, por ejemplo, un video a 640x360 y otro a 1280x720. Más sobre esto en una publicación futura.
Transmisión
Soportes Zencoder Transmisión en directo HTTP para dispositivos iOS, así como Microsoft Smooth Streaming (Silverlight).
Resumen
1. El mínimo para vídeo HTML5 es MP4 + WebM u Ogg (o ambos), utilizando la versión MP4 para el respaldo de Flash.
2. Para soporte móvil, uno H.264 / MP4 la salida puede llevarle un largo camino. 2-3 permite una mejor calidad y una compatibilidad más amplia.
Recomendaciones
A continuación se muestran algunas configuraciones sugeridas. Zencoder admite todos estos formatos, y si se pregunta cómo crear los perfiles de salida óptimos con Zencoder, abra un ticket de soporte. Siempre estaremos encantados de asesorarte.
1. Hágalo funcionar
- HTML5, Flash, móvil: MP4 / H.264, perfil de línea de base, 480x360 o 640x480
- HTML5: WebM u Ogg
{
"input": "s3://bucket-name/file-name.avi",
"outputs": [
{
"url": "s3://output-bucket/output-file-name.mp4",
"size": "640x480"
},
{
"url": "s3://output-bucket/output-file-name.webm",
"size": "640x480"
}
]
}
- HTML5, Flash: MP4 / H.264, perfil alto
- HTML5: WebM
- HTML5: Ogg
- Móvil: MP4 / H.264, perfil de línea de base, 480x360 o 640x480
2. Redondearlo
{
"input": "s3://bucket-name/file-name.avi",
"outputs": [
{
"url": "s3://output-bucket/output-file-name.mp4",
"h264_profile": "high"
},
{
"url": "s3://output-bucket/output-file-name.webm"
},
{
"url": "s3://output-bucket/output-file-name.ogg"
},
{
"url": "s3://output-bucket/output-file-name-mobile.mp4",
"size": "640x480"
}
]
}
3. Apoya todo
- HTML5, Flash: MP4 / H.264, perfil alto
- HTML5: WebM
- HTML5: Ogg
- Móvil: MP4 / H.264, perfil de línea de base, 480x360, para una amplia compatibilidad
- Móvil: MP4 / H.264, perfil principal, 1280x720, para dispositivos iOS más nuevos (iPhone 4, iPad, Apple TV)
- Móvil: 3GP / MPEG4, 320x240 y / o 177x144, para no smartphones *
{
"input": "s3://bucket-name/file-name.avi",
"outputs": [
{
"url": "s3://output-bucket/output-file-name.mp4",
"h264_profile": "high"
},
{
"url": "s3://output-bucket/output-file-name.webm"
},
{
"url": "s3://output-bucket/output-file-name.ogg"
},
{
"url": "s3://output-bucket/output-file-name-mobile-480x360.mp4",
"size": "480x360"
},
{
"url": "s3://output-bucket/output-file-name-mobile-1280x720.mp4",
"size": "1280x720"
},
{
"url": "s3://output-bucket/output-file-name-mobile.3gp",
"size": "320x240"
}
]
}