Hola, en esta lección vamos
a hablar de multimedia. Esto incluye vídeo y
audio en tu sitio web. Vídeo y audio son dos
de los más populares y dos de los más
odiados de la web. A los diseñadores les encanta
porque ponen sus videos y tal vez algo de música casera en línea
y la comparten con todo el mundo. La gente que accede a tu sitio a veces
lo odia porque siente que no tiene ningún control sobre
lo que están viendo. De lo que vamos a hablar hoy es de
los elementos de audio y vídeo de HTML5. Vamos a explicar brevemente
el propósito de los complementos. Y finalmente, vamos a reflexionar
sobre los problemas de accesibilidad que vienen de la mano del uso
de estas etiquetas multimedia. Antes de HTML5 no había un uso
consistente de los multimedia que estaban en
todos los navegadores. HTML5 está diseñado para
evitar el uso de complementos o software adicionales que
no tengas ya en tu máquina. Debería ser
plug and play. Si pones un vídeo, la gente
debería ser capaz de verlo sin tener que descargar QuickTime o Flash,
o cualquier cosa por el estilo. No es una etiqueta totalmente
implementada todavía. Pero se está moviendo
muy rápido en esa dirección. Comencemos con el
elemento de vídeo. La etiqueta video utiliza un
atributo src que es muy similar al atributo
de img. Le dices al navegador
dónde está el archivo. También puedes utilizar lo que
llamamos etiquetas incrustadas, donde puedes tener la etiqueta video
y, a continuación, varias fuentes debajo. Hay una serie de atributos que
se utilizan muy ampliamente. Los dos primeros, altura y ancho,
son bastante auto explicativos. ¿Qué tamaño te gustaría que
tu vídeo tuviera en el navegador? Autoplay dicta si el vídeo debe iniciarse
tan pronto como se cargue la página. Loop permitirá que el vídeo
se reproduzca una y otra vez. Y el último, controls, se puede
agregar para dar a la persona más control de cuándo
parar e iniciar el vídeo. Si usas una etiqueta video,
suele ser una buena idea poner texto junto con los
diferentes atributos. De esta forma, si el navegador por
alguna razón no es compatible con la etiqueta o no puede reproducir el vídeo, tienes una
sugerencia útil para que el usuario sepa que debería haber un
vídeo que estaría viendo. El elemento audio es
muy similar al video, de nuevo utilizamos un atributo
src para enlazar con el archivo. Normalmente, vas a utilizar
un archivo .mp3 o .wav. Los atributos de nuevo,
son muy similares. Tienes autoplay, controls y loop, pero
también tenemos buffered, muted y volume. Y estos son los atributos extras
que puedes poner para controlar lo que la gente escucha
y a qué volumen. También cuando estés utilizando audio,
puedes configurar clips a donde puedes ir por ejemplo, quiero que el vídeo
comience en este momento en particular. Mi primer ejemplo, quiero que solo
toque la música de 5 a 25 segundos. El siguiente,
empiezas al principio va a sonar los primeros
39 segundos. Una vez más, puedes
seguir y seguir. Quiero comenzar en un minuto 38
segundos, seguir y sonar hasta los 45. O finalmente puedes decir, empieza
en el segundo 42 y suena desde allí. Mostrarte el código para
el vídeo y audio HTML es con mucho la antítesis
de lo que se trata. Se supone que se trata
de ver y escuchar cosas. Vamos a seguir y a mirar algún
código que realmente funciona. Puedes ver que tengo el src
como mi película BoxCar, He configurado el ancho
predeterminado a 40. Voy a ir a Sublime y abrirlo
en el navegador. Ahí está, y no es
muy emocionante. A menos que tengas unos ojos super rápidos
y tu navegador sea increíblemente rápido, te perderás el hecho de que se ha
cargado el vídeo y se ha mostrado entero. Así que vamos a seguir
y a probarlo de nuevo. En realidad, solo lo ha cargado
y no ha hecho nada. Vamos a añadir
autoplay. Todo correcto,
lo guardamos. Voy a venir aquí y volver a
cargarlo, y ahora se puede ver al agregar el atributo autoplay, que se
va a mostrar automáticamente el vídeo. Esto es algo que no debes hacer
a menos que estés muy seguro de que el que
mira quiere verlo. Hubo un gran revuelo recientemente
cuando un sitio de medios sociales comenzó a hacer que todos los vídeos
se reprodujeran automáticamente. Si continuabas, de repente todos
estos vídeos se estaban reproduciendo. Y se estaban comiendo una enorme
cantidad de ancho de banda. Por lo tanto, en lugar de hacer
autoplay, vamos a poner controls. Al hacer esto, se puede ver que se ha añadido un pequeño
panel de control en la parte inferior del vídeo. La gente ahora puede iniciar el vídeo,
detener el video, y rebobinar. Esta es la forma
en que debes pensar cómo se puede mejorar
la experiencia del usuario. Es posible poner
múltiples atributos en esto y ponerlos
unos encima de otros. Si lo hacemos ahora,
puedes experimentar mis cinco años volando calle abajo
varias veces una y otra vez. De nuevo, deberías evitar el uso de
loop y también el uso de autoplay, a menos que des a la gente la oportunidad
de utilizar los controles también, ¿bien? Una última cosa que quiero decir
es que puedes notar que controls y loop, son atributos que
parecen no tomar ningún valor. src=, width=. Cuando se ponen
estos atributos booleanos. que es lo mismo que decir controls igual a true. Loop es igual a true. Esa es la forma en que
pasamos con nuestro vídeo. Vamos a seguir y ver
el audio un segundo. Hacemos esto un poco
más grande. Lo que tenemos aquí es un enlace
a la misma canción dos veces. En mi primera versión, se puede ver
que tengo una pequeña barra de audio, porque me aseguré
de usar controls. Y si doy a play, va a seguir
y tocar toda la canción. Sin embargo, en mi segunda opción, se
puede ver que he añadido, t = 15: 35. Lo he preparado para ti, vas a escuchar la canción desde la
parte emocionante que te pone a tono. Estos son unos ejemplos sencillos de
cómo utilizar las etiquetas para mostrar video audio. Espero que según vayas codificando,
te asegures de escribir cosas, trastees con cosas, ejecutes cosas
y tengas una idea de cómo video y todas las demás etiquetas
de HTML5 trabajan. Una de las cosas que hablo
con la gente que ha codificado en otras versiones de HTML
y no quieren cambiar a HTML5. Es que hay muchas razones para
realizar este cambio rápido fácilmente. Y los complementos
son un excelente ejemplo. Antes del HTML5 no había ninguna
norma, se necesitaban complementos. Lo que debemos
hacer es seguir e incluso si no está soportado de
momento, sigue y utiliza esta etiqueta, entendiendo que algunos navegadores
todavía requieren Flash para reproducirlos. Por último, vamos a hablar de
los problemas de accesibilidad. Cuando utilices video o audio, al igual
que con cualquier contenido no de texto tú debes asegurarte de proporcionar
una descripción de texto y subtítulos u otro
contenido equivalente. Debes asegurarte de que también
proporcionas algún enlace a los complementos. De lo contrario, te
vas a quedar con un pequeño icono roto que
la gente no siempre entiende. Por último, lo más importante que me
gustaría que te lleves de esta charla, más allá de ser capaz
de utilizar el código, es que el multimedia debería
realmente mejorar tu contenido. No quieres que
sea una distracción. No quieres que la gente se pase
el tiempo averiguando cómo apagarlo, que puedan, realmente obtener
el contenido de tu página. Gracias.