La etiqueta de video HTML5 facilita la adición de video a sus páginas web. Pero aunque parece fácil en la superficie, hay muchas cosas que debes hacer para que tu video esté en funcionamiento. Este tutorial lo llevará a través de los pasos para crear una página en HTML5 que ejecutará videos en todos los navegadores modernos.
- Alojar tu propio video HTML5 vs. usar YouTube
- Descripción rápida de soporte de video en la web
- Crea y edita tu video
- Convierte el video a Ogg para Firefox
- Convierte el video a MP4 para Safari
- Convierte el video a FLV para Internet Explorer
- Agregue el elemento de video a su página web
- Agregue el JavaScript y Flash Player para hacer que Internet Explorer funcione
- Prueba en tantos navegadores como puedas
Alojamiento de su propio video HTML 5 frente a YouTube
YouTube es un gran sitio. Facilita la incrustación de videos en páginas web rápidamente, y con algunas excepciones menores es bastante transparente en la ejecución de esos videos. Si publica un video en YouTube, puede estar bastante seguro de que cualquiera podrá verlo.
Pero el uso de YouTube para incrustar tus videos tiene algunos inconvenientes
La mayoría de los problemas con YouTube están en el lado del consumidor, en lugar de en el lado del diseñador, cosas como:
- Búsqueda lenta e indexación
- Interrupciones del servidor
- Contenido eliminado (aparentemente) arbitrariamente
- Demasiado mal contenido
Pero hay algunas razones por las que YouTube también es malo para los desarrolladores de contenido, incluyendo:
- Duración máxima de 10 minutos para videos (para cuentas gratuitas)
- Rendimiento de carga pobre
- YouTube obtiene derechos de uso ilimitados para tu video
- Cualquier usuario de YouTube obtiene derechos de uso ilimitados para tu video
Video HTML5 da algunas ventajas sobre YouTube
El uso de HTML5 para video le permitirá controlar cada aspecto de su video, desde quién puede verlo, cuánto tiempo dura, qué contiene el contenido, dónde está alojado y cómo se desempeña el servidor. Y el video HTML5 le brinda la oportunidad de codificar su video en tantos formatos como sea necesario 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
Éstos incluyen:
- Tienes que codificar tu video en al menos tres codecs diferentes
- Debe incluir algún JavaScript para garantizar que los navegadores que no admiten HTML5 funcionen
- Su servidor debe ser capaz de manejar los requisitos de ancho de banda de los videos de alojamiento.
Continuar leyendo a continuación
02 de 10Descripción rápida de soporte de video en la web
Agregar video a las páginas web ha sido durante mucho tiempo un proceso difícil. Había tantas cosas que podían salir mal:
- Primero, usas el etiqueta para incrustar su video en su página. PERO esa etiqueta está en desuso a favor de otra etiqueta. Y algunos navegadores nunca lo soportaron bien de todos modos.
- Así que cambias a la etiqueta, pero los navegadores más antiguos no lo admiten y los navegadores más nuevos son incompletos en su soporte.
- Entonces piensas flash! Y codifica tu video como un archivo FLV. Pero Flash no es compatible con muchos dispositivos móviles y mucha gente odia a Flash sin importar cómo se use (el 25% de los encuestados en mi encuesta que pregunta cómo se siente acerca de Flash declaró que no pueden soportar Flash de ninguna manera).
- Entonces, decide subir su video a un sitio de incrustación de video como YouTube, pero luego tiene los problemas con YouTube que discutimos.
- Finalmente, decide utilizar 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. Soporte de navegador para codecs de video y contenedores
¿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 es cada vez más importante. Y muchos sitios han cambiado exitosamente a video.
Las siguientes páginas de este artículo lo guiarán a través de cómo agregar 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, Flash e Internet Explorer 7 y 8. También tiene las claves que necesita para agregar soporte para otros navegadores antiguos si es necesario.
Continuar leyendo a continuación
03 de 10Crea y edita tu video
Lo primero que necesita cuando va a colocar un video en una página web es el video real. Puede disparar de forma continua y editar después para crear una función, o puede crear una secuencia de comandos y planificarla con anticipación. De cualquier manera funciona bien, es lo que sea que te sientas cómodo. Si no sabe qué tipo de video debe hacer, consulte estas ideas en la Guía de video de Desktop:
- Proyectos de video familiar
- Videos promocionales y de marketing.
- Video Virtual Tours
- Como videos
- Videos de boda
Aprende a grabar video de alta calidad
Asegúrese de saber cómo grabar en interiores y exteriores, así como cómo grabar audio. La iluminación también es muy importante: las tomas que son demasiado brillantes lastiman los ojos, y demasiado oscuras solo se ven turbias y poco profesionales. Incluso si solo planea tener un video de 30 segundos en su sitio, cuanto más alta 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 reproducir una canción para usted, deberá buscar música de fondo para reproducirla en segundo plano. También hay lugares donde puedes almacenar imágenes para agregar a tus videos.
Editando tu video
No importa qué software de edición use, siempre que esté familiarizado con él y pueda usarlo de manera efectiva. Gretchen, la Guía de video para computadora, tiene algunos consejos de edición de video profesional que pueden ayudarte a editar tus videos para que se vean geniales.
Guarda tu video en un MOV o AVI (o MPG, CD, DV)
Para el resto de este tutorial, vamos a suponer que tiene su video guardado en algún tipo de formato de alta calidad (no comprimido) como AVI o MOV. Si bien puedes usar estos archivos como están, te encuentras con todos los problemas con el video que ya hemos discutido. Las siguientes páginas explicarán cómo convertir su archivo en tres tipos para que sea visible por el mayor número de navegadores.
04 de 10Convierte el video a Ogg para Firefox
El primer formato 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, mientras que Ogg tiene soporte para navegador, muchos de los programas de video conocidos que puedes comprar (Adobe Media Encoder, QuickTime, etc.) no ofrecen una opción de conversión de Ogg. Entonces, la única forma de convertir tu 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 quizás tengas mejor suerte. Este sitio tiene la ventaja de ser libre.
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.
- Koyote Video Converter (Windows)
- Free Video Converter Creemos que esto tiene tanto una versión de Windows como una de Macintosh, pero fue difícil decirlo desde su sitio
- Theora Encoder 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.
Continuar leyendo a continuación
05 de 10Convierte el video a MP4 para Safari
El siguiente formato en el que debe convertir su video es MP4 (video H.264) para que pueda reproducirse en Safari 3 y 4 y en iPhone y Android. Además, los videos H.264 se pueden convertir fácilmente en archivos FLV para verlos en Flash.
Este formato está más fácilmente disponible en productos comerciales, y probablemente ya tenga un programa que se convertirá a MP4 si tiene un editor de video. Si tiene Adobe Premiere, puede usar Adobe Video Encoder, o si tiene QuickTime Pro que también funcionará. Muchos de los conversores que discutimos en la página anterior también convertirán 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.
- SUPER (Windows) - convertirá muchos tipos de archivos diferentes a MP4 y FLV
- Free Video Converter Creemos que esto tiene tanto una versión de Windows como una de Macintosh, pero fue difícil decirlo desde su sitio.
Guarde su archivo MP4 en su sitio web y luego deberá convertirlo a Flash para que lo utilice Internet Explorer.
06 de 10Convierte el video a FLV para Internet Explorer
La forma más fácil de convertir videos a FLV es usar Flash. Así es como convertimos mis videos a flash. Pero si no tiene Flash, aquí hay dos herramientas populares para convertir archivos a FLV:
- SUPER (Windows) - convertirá muchos tipos de archivos diferentes a MP4 y FLV
- ffmpegX (Macintosh): convertirá muchos tipos de archivos diferentes a Mp4 y FLV.
Guarde su archivo FLV en su sitio web y la página siguiente le mostrará cómo escribir el HTML para que pueda reproducir sus videos.
Continuar leyendo a continuación
07 de 10Agregue el elemento de video a su página web
Es muy fácil usar HTML 5 para agregar video a páginas web. La mayoría de los navegadores modernos admiten el video HTML 5, aunque no todos lo admiten de la misma manera. Pero lo que esto significa es que si guarda su video en formato Ogg y MP4, podrá 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 que esperan HTML 5:
- Crea tu página web como lo harías normalmente:
- Dentro del cuerpo, coloque el
- Decida qué atributos desea que tenga su video: Recomendamos el uso de controles y precarga. Use la opción de póster si su video no tiene una buena primera escena.
- reproducción automática - para comenzar tan pronto como se descargue
- controles: permite que los lectores controlen el video (pausa, rebobinado, avance rápido)
- bucle - comienza el video desde el principio cuando termina
- precarga: descargue previamente el video para que esté listo más rápido cuando el cliente haga clic en él
- póster: defina la imagen que desea usar cuando el video se detiene
- Luego, agregue los archivos de origen para las dos versiones de su video (MP4 y OGG) dentro de la
- 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 al menos en 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?
Internet Explorer no le gusta HTML 5 o la
En la siguiente sección, hablaremos sobre lo que puede hacer para que IE 8 juegue bien con sus etiquetas de video HTML 5 y muestre un video. Tienes que usar flash.La buena noticia es que se espera que IE 9 sea compatible con HTML 5 y la etiqueta de video.
08 de 10Agregue el JavaScript y Flash Player para hacer que Internet Explorer funcione
Es posible que haya notado que en el HTML de la página anterior, no había ninguna línea de origen para el archivo FLV. Y si probaste esa página en Internet Explorer, no funcionaría. Esto se debe a que Internet Explorer no reconoce HTML 5 y no puede reproducir videos OGG o MP4 de forma nativa. Para que Internet Explorer 7 y 8 funcionen, debe hacer que reproduzca el video como Flash. Pero hay más pasos para que funcione, en lugar de simplemente agregar el archivo FLV.
Paso 1: Obtenga un reproductor de video flash para su sitio web
Recomendamos obtener FlowPlayer porque es un reproductor de video Flash de código abierto que puede instalar en su servidor web y usar cada vez que tenga un video Flash para reproducir. La versión gratuita de FlowPlayer inserta publicidad en sus videos, pero también puede comprar licencias comerciales si las necesita.
Siga las instrucciones en el sitio de FlowPlayer para instalar FlowPlayer en su sitio web. En pocas palabras, instalará 2 archivos SWF y un archivo JavaScript en su sitio. En la parte inferior de su HTML, (antes del etiqueta) agregará una línea:
Pero Internet Explorer aún no reproduce el video, debes enseñarle a reconocer las etiquetas HTML 5.
Paso 2: convencer a Internet Explorer para que lea las etiquetas HTML 5
Hay un script práctico en Google Code llamado "HTML Shiv" que ayudará a IE a reconocer los elementos HTML 5. Así que en el
de su documento HTML desea referenciarlo. Es mejor incluirlo en los comentarios condicionales de IE para que otros navegadores no se confundan:
Bien, ahora IE reconocerá la
