El
desconocimiento de las etiquetas de video y de cómo agregar imagen informativa
en él antes de reproducirlo mediante etiquetas de HTML, conlleva a invertir
largas horas de estudio de otros lenguajes de programación. Por lo tanto, identificaremos
los pasos para el uso de la etiqueta video
y algunas propiedades adicionales.
Incluiremos videos a
documentos web, según las
recomendaciones oficiales del lenguaje HTML, a fin de etiquetar correctamente
los archivos multimedia para proyectos de internet.
Con la etiqueta
video incluida en un documento HTML,
es necesario crear el inicio y el cierre correspondientes para su correcto
funcionamiento. Es posible agregarle atributos a esta etiqueta, como a la
mayoría de las pertenecientes a este lenguaje, por ejemplo, id para identificar de forma única el video,
o class para agruparlos en una clase,
a fin de aplicarle a varios una propiedad de estilo.
061-01_1205_ilu01. Creación
de la etiqueta video
La
instrucción de video con controles se conforma de la siguiente manera:
- Se crea la etiqueta de inicio y la de cierre con el elemento video.
- Se especifica src,
diminutivo de source, en español
fuente, dentro de la etiqueta de inicio, donde definimos la ubicación del
archivo, junto con el nombre y extensión. En esta oportunidad utilizamos mp4.
- Se agrega el atributo controls,
con la finalidad de mostrar mediante el navegador web los controles de inicio, pausa y volumen.
061-01_1205_ilu02.
Etiqueta video con atributos
Cada
navegador web muestra los controles
de video de una forma diferente. En la ilustración tenemos dos ejemplos con
navegadores diferentes:
061-01_1205_ilu03.
Visualización de la etiqueta video en navegadores web
Anteriormente
observamos un ejemlo, donde se ejecuta la etiqueta video en Google Chrome, y mediante Internet Explorer. La
presentación también es diferente cuando se utilizan navegadores web como Safari, Opera, entre
otros.
Es posible
agregar a la etiqueta video un
atributo llamado poster, el cual se
encarga de mostrar una imagen antes de reproducirse el video. Observemos en el
código siguiente cómo se especifica este atributo, para el cual agregamos entre
comillas la ubicación de la imagen a presentar.
061-01_1205_ilu04.
Creación del atributo poster
En la
ilustración anterior tenemos dos ejemplos: en el primero se muestra el video
con el dibujo de un usuario, y el segundo solo muestra un fondo en color negro,
a la espera de la reproducción manual por parte del visitante.
El uso
ideal del atributo poster, es dar una
referencia inicial al usuario del contenido del video, razón por la cual es
necesario esmerarnos para captar la atención del espectador.
Keynotes
- Con la etiqueta video incluida en un documento HTML, es necesario
crear el inicio y el cierre correspondientes para su correcto funcionamiento.
- Cada navegador web muestra los controles de video de una forma diferente.
- A la etiqueta video es posible agregarle un atributo llamado poster, el cual se encarga de mostrar una imagen antes de
reproducirse el video.
- El uso ideal del atributo poster, es dar una referencia inicial al
usuario del contenido del video, razón por la cual debemos esmerarnos para
captar la atención del espectador.
RetoIncluye tres videos a un
documento web, según las
recomendaciones oficiales del lenguaje HTML. Es necesario aplicar todas las
etiquetas aprendidas.
¡Comparte el resultado del
reto en tu vPages y pide comentarios
de optimización del código a tus compañeros!
Tiempo disponible: entre 15
y 30 minutos.
CierreSeguir las recomendaciones
oficiales del lenguaje HTML para incluir videos en documentos web, permite optimizar el tiempo cuando
creamos proyectos para la internet. Asimismo, etiquetamos correctamente los
archivos multimedia a fin de ser reproducidos por el usuario según sus
necesidades. Con paciencia y práctica constante, aplicaremos con eficiencia la
etiqueta video y sus atributos.
