Uso de HTML5 para mostrar videos en los navegadores actuales

Alojamiento de su propio video HTML 5 vs. Usando YouTube

YouTube es un gran sitio. Facilita la inserción de videos en páginas web rápidamente, y con algunas excepciones menores, es bastante fluido en la ejecución de esos videos. Si publica un video en YouTube, puede estar bastante seguro de que cualquiera podrá verlo.

Pero usar YouTube para incrustar sus videos tiene algunos inconvenientes

La mayoría de los problemas con YouTube están del lado del consumidor, más que del lado del diseñador, cosas como:

• Búsqueda e indexación lentas
• Interrupciones del servidor
• Contenido que se elimina (aparentemente) de forma arbitraria
• Demasiado contenido malo

Pero hay algunas razones por las que YouTube también es malo para los desarrolladores de contenido, que incluyen:

• Duración máxima de 10 minutos para videos (para cuentas gratuitas)
• Rendimiento de carga deficiente
• YouTube obtiene derechos de uso ilimitados para su video
• Cualquier usuario de YouTube obtiene derechos de uso ilimitados para su video

El video HTML5 ofrece algunas ventajas sobre YouTube

Utilizando HTML5 for video le permite controlar todos los aspectos de su video, desde quién puede verlo, cuánto tiempo es, qué contiene el contenido, dónde está alojado y cómo funciona el servidor. Y HTML5 le brinda la oportunidad de codificar su video en tantos formatos como necesite para asegurarse de que la cantidad máxima de personas pueda verlo. Sus clientes no necesitan un complemento o esperar hasta que YouTube lance una versión más nueva.

Por supuesto, el video HTML5 ofrece algunos inconvenientes

Éstas incluyen:

• Tienes que codificar tu video en al menos tres códecs diferentes.
• Debe incluir algo de JavaScript para asegurarse de que los navegadores no admitan HTML5 trabajará.
• Su servidor debe poder manejar los requisitos de ancho de banda para alojar videos.

Descripción general rápida del soporte de video en la web

Agregar video a las páginas web ha sido un proceso difícil durante mucho tiempo. Había tantas cosas que podían salir mal:

• Primero, usa el etiqueta para insertar su video en su página. PERO esa etiqueta está obsoleta en favor de otra etiqueta. Y algunos navegadores nunca lo admitieron bien de todos modos.
• Así que cambia al tag, pero los navegadores más antiguos no lo admiten y los navegadores más nuevos son incompletos en su soporte.
• Entonces piensas Destello! Y codifique su video como un archivo FLV. Pero Destello ya no es compatible con dispositivos Windows.
• Entonces decides subir tu video a un sitio de incrustación de videos como YouTube, pero luego tienes los problemas con YouTube que discutimos.
• Finalmente, decide ir con HTML5, pero Internet Explorer no lo admite (no hasta Internet Explorer 9). E incluso si lo hace, hay dos estándares de códec de video que son compatibles y solo un navegador que puede usar ambos.

¿Entonces, que se supone que debes hacer? Renunciar al video ya no es una opción para la mayoría de los sitios, ya que el video se está volviendo cada vez más importante. Y muchos sitios han cambiado exitosamente al video.

Las siguientes páginas de este artículo lo guiarán a través de cómo agregar un video a sus páginas web que funcionan en Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 y 4, iPhone y Android e Internet Explorer 7 y 8. También tendrá las claves que necesita para agregar soporte para otros navegadores más antiguos si es necesario.

Crea y edita tu video

Lo primero que necesita cuando va a poner un video en una página web es el video real. Puede disparar continuamente y editar después para crear una función, o puede programarlo y planificarlo con anticipación. Cualquiera de las dos formas funciona bien, es lo que le resulte más cómodo. Si no sabe qué tipo de video debe hacer, consulte estas ideas de la Guía de video de escritorio:

• Proyectos de videos familiares
• Vídeos promocionales y de marketing
• Visitas virtuales en video
• Videos de' cómo hacer
• Videos de boda

Aprenda a grabar videos de alta calidad

Asegúrese de saber cómo grabar en interiores y exteriores, así como también cómo grabar audio. La iluminación también es muy importante: las tomas que son demasiado brillantes lastiman los ojos y demasiado oscuras simplemente se ven embarradas y poco profesionales. Incluso si solo planea tener un video de 30 segundos en su sitio, cuanto mayor sea la calidad, mejor se reflejará en su sitio web.

Recuerde también que los derechos de autor se aplican a cualquier sonido o música (así como a las imágenes de archivo) que desee utilizar en su video. Si no tiene acceso a un amigo que pueda escribir y tocar una canción para usted, deberá buscar música libre de derechos para jugar en segundo plano. También hay lugares donde puede almacenar material de archivo para agregarlo a sus videos.

Edición de su video

No importa qué software de edición utilice, siempre que esté familiarizado con él y pueda utilizarlo de forma eficaz. Gretchen, la Guía de video de escritorio, tiene algunos consejos profesionales de edición de video que pueden ayudarlo a editar sus videos para que se vean geniales.

Guarde su video en un MOV o AVI (o MPG, CD, DV)

Para el resto de este tutorial, asumiremos que tiene su video guardado en algún tipo de formato de alta calidad (no comprimido) como AVI o MOV. Si bien puede usar estos archivos tal como están, se encontrará con todos los problemas con el video que ya hemos discutido. Las siguientes páginas explican cómo convertir su archivo en tres tipos para que sea visible por la mayor cantidad de navegadores.

Convierta el video a Ogg para Firefox

El primer formato al que convertiremos es Ogg (a veces llamado Ogg-Theora). Este formato es uno que Firefox 3.5, Opera 10.5 y Chrome 3 pueden ver.

Desafortunadamente, aunque Ogg es compatible con el navegador, muchos de los programas de video conocidos que puede comprar (Adobe Media Encoder, QuickTime, etc.) no ofrecen una opción de conversión de Ogg. Entonces, la única forma de convertir su video a Ogg es encontrar un programa de conversión en la Web.

Opciones de conversión

Existe una herramienta en línea llamada Media-Convert que pretende convertir varios formatos de video (y audio) a otros formatos de video (y audio). Cuando lo probamos con mi video de prueba de 3 segundos, no pudimos hacerlo funcionar en mi Mac. Pero puede que tengas mejor suerte. Este sitio tiene la ventaja de ser gratuito.

Algunas otras herramientas que encontramos incluyen:

• Miro Video Converter (Windows Macintosh): este programa tiene la ventaja de convertir tanto a Ogg como a MP4 (H.264) y es de código abierto.
• Convertidor de video gratuito: Creemos que tiene una versión para Windows y una para Macintosh, pero era difícil saberlo desde su sitio.
• Codificador Theora simple (Macintosh): Este es el que solemos usar.

Una vez que haya guardado su video en el formato Ogg, guárdelo en una ubicación en su sitio web y vaya a la página siguiente para convertirlo a otros formatos para otros navegadores.

Convierta el video a MP4 para Safari e Internet Explorer

El siguiente formato al que debe convertir su video es MP4 (video H.264) para que pueda reproducirse en Internet Explorer 9 y versiones posteriores, Safari 3 y 4, y en iPhone y Android.

Este formato está más disponible en productos comerciales y probablemente ya tenga un programa que convierte a MP4 si tiene un editor de video. Si usted tiene Adobe Premiere puede usar Adobe Video Encoder, o si tiene QuickTime Pro que también funciona. Muchos de los convertidores que discutimos en la página anterior también convierten videos a MP4.

• MediaConvert: Una herramienta de AWS en línea.
• Miro Video Converter (Windows Macintosh): este programa tiene la ventaja de convertir tanto a Ogg como a MP4 (H.264) y es de código abierto.
• SÚPER (Windows): convertirá muchos tipos de archivos diferentes a MP4
• Convertidor de video gratuito: Creemos que tiene una versión para Windows y otra para Macintosh, pero era difícil saberlo desde su sitio.

Agregue el elemento de video a su página web

1. Cree su página web como lo haría normalmente:

2. Dentro del cuerpo, coloque el
3. Decide qué atributos quieres que tenga tu video: recomendamos usar controles y precarga. Usa la opción de póster si tu video no tiene una buena primera escena.
   reproducción automática: para comenzar tan pronto como se descargue
4. controles: permita que sus lectores controlen el video (pausar, rebobinar, avanzar rápido)
5. bucle: comienza el video desde el principio cuando termina
6. precarga: descargue previamente el video para que esté listo más rápido cuando el cliente haga clic en él
7. póster: defina la imagen que desea usar cuando se detiene el video
8. Luego agregue los archivos de origen para las dos versiones de su video (MP4 y OGG) dentro del
9. Abra la página en Chrome 1, Firefox 3.5, Opera 10 y / o Safari 4 y asegúrese de que se muestre correctamente. Debe probarlo en al menos Firefox 3.5 y Safari 4, ya que cada uno usa un códec diferente.

Eso es. Una vez que tenga este código en su lugar, tendrá un video que funciona en Firefox 3.5, Safari 4, Opera 10 y Chrome 1. Pero, ¿qué pasa con Internet Explorer?

Es muy fácil usar HTML 5 para agregar un video a páginas web. La mayoría de los navegadores modernos admiten video HTML 5, aunque no todos lo admiten de la misma manera. Pero lo que esto significa es que si guarda su video en formatos Ogg y MP4, puede escribir solo cuatro o cinco líneas de HTML para que se muestre en la mayoría de los navegadores modernos (excepto Internet Explorer 8). Así es cómo:

Escriba el marcador de tipo de documento HTML 5 para que los navegadores sepan esperar HTML 5:

1. Cree su página web como lo haría normalmente:

2. Dentro del cuerpo, coloque el
3. Decide qué atributos quieres que tenga tu video: recomendamos usar controles y precarga. Usa la opción de póster si tu video no tiene una buena primera escena.
   reproducción automática: para comenzar tan pronto como se descargue
4. controles: permita que sus lectores controlen el video (pausar, rebobinar, avanzar rápido)
5. bucle: comienza el video desde el principio cuando termina
6. precarga: descargue previamente el video para que esté listo más rápido cuando el cliente haga clic en él
7. póster: defina la imagen que desea usar cuando se detiene el video
8. Luego agregue los archivos de origen para las dos versiones de su video (MP4 y OGG) dentro del
9. Abra la página en Chrome 1, Firefox 3.5, Opera 10 y / o Safari 4 y asegúrese de que se muestre correctamente. Debe probarlo en al menos Firefox 3.5 y Safari 4, ya que cada uno usa un códec diferente.

Eso es. Una vez que tenga este código en su lugar, tendrá un video que funciona en Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ y Chrome 1.

Prueba en tantos navegadores como puedas

Para su tranquilidad, también debe probar en navegadores antiguos para ver qué hacen, especialmente si muchos de sus lectores utilizan navegadores antiguos.

Probar las páginas de video es fundamental si desea tener un lanzamiento exitoso. Debe asegurarse de probar su página en los navegadores y versiones más populares para su sitio web.

Descubrimos que si bien es posible usar herramientas como BrowserLab y AnyBrowser para probar videos, no es tan confiable como abrir la página en un navegador. Cuando haces eso, realmente puedes ver si está funcionando o no.

Dado que se tomó la molestia de codificar su video en múltiples formatos, debe probarlo para asegurarse de que se muestre en varios navegadores. Esto significa que, como mínimo, debe probarlo en Firefox, Safari e IE.

Para su tranquilidad, también debe probar en navegadores antiguos para ver qué hacen, especialmente si muchos de sus lectores utilizan navegadores antiguos.

Hacer que el video funcione en navegadores más antiguos

Al igual que con cualquier página web, primero debe considerar la importancia de que esos navegadores funcionen. Si el 90% de sus clientes utilizan Netscape, debería tener un plan alternativo para ellos. Pero si menos del 1% lo hace, es posible que no importe tanto.

Una vez que haya decidido qué navegadores intentará admitir, la forma más fácil es simplemente crear una página alternativa para que vean el video. En esa página alternativa, incrustarías un video usando HTML 4. Y luego use alguna forma de detección del navegador para redirigirlos allí o simplemente agregue un enlace a esa página en esta.