Elementos Multimedia y de Inserción
Audio
Se trata de una etiqueta para reproducir audio en la página, se utiliza de una forma similar a la etiqueta video. Debido a las patentes que poseen algunos formatos de audio, no todos los navegadores pueden aceptar los mismos formatos; en la actualidad son dos los formatos más utilizados en la industria, estos son: "mp3" y "ogg", de modo que para que el archivo de audio esté disponible para casi todos los navegadores, lo más recomendable es incluir el archivo en cuestión una vez por cada formato, es decir, una vez por "mp3" y una vez por "ogg".
Para optimizar esto utilizamos el elemento "source", el cual se incluye dentro de la etiqueta "audio", usando el atributo "src" dentro de este. La función de los elementos source es que el navegador pueda elegir el formato de audio que sea compatible con este; para esto usa el atributo "type" del elemento "source", este atributo es leído por el navegador para ubicar el formato de audio que es compatible. Si el atributo "type" no se incorpora, el navegador probará cada elemento hasta encontrar el formato de audio que sea compatible, aumentando el tiempo de ejecución.
La etiqueta "audio", al tratarse de una etiqueta HTML5, existen navegadores que aún no están capacitados para ejecutarla, por lo tanto la estructura de esta etiqueta no solo debe de incluir los atributos de "src", sino que también una etiqueta "p" con un mensaje de notificación; este párrafo será visible en aquellos casos en los que no sea posible ejecutar los archivos de audio, ya sea por un tema de compatibilidad o de conexión. Por lo tanto, es recomendable que este párrafo contenga un texto de notificación y, si de verdad es muy necesario el audio, también un enlace directo al archivo de audio.
Atributos
- Autoplay: indica que el audio se reproduzca automáticamente en cuanto se cargue; no es muy recomendable su uso ya que los usuarios pueden encontrarlo molesto.
- buffered: Un atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer. Este atributo contiene un objeto TimeRanges (en-US).
- Controls: ofrece controles para que el usuario pueda controlar la reproducción.
- Muted: Hace que los medios se reproduzcan con el sonido apagado de forma predeterminada.
- Loop: Hace que el audio comience a reproducirse cada vez que finaliza. Esto puede en ocasiones resultar molesto, por lo que lo mejor es utilizarlo solo si es realmente necesario.
-
Preload: Le indica al navegador qué implementación podría darle una mejor experiencia al usuario, puede tener alguno de los siguientes valores:
- none le indica al navegador que el usuario no tendrá que consultar el audio, y no será necesario almacenarlo en caché.
- metadata le indica al navegador que el usuario tendrá que consultar el audio, es razonable almacenar los metadatos.
- auto indica que el audio tiene prioridad, es necesario descargarlo aun si el usuario no lo use.
Si el preload no está configurado, su valor será definido por el navegador.
-
src: Indica la URL del audio que se va a usar. Su uso es opcional ya que también se puede usar el elemento source dentro del bloque de audio para indicar el audio que se va a insertar.
Las compensaciones de tiempo se especifican como valores float que indican el número de segundos que se va a compensar.
Nota: los atributos autoplay y preload no fuerzan al navegador a seguir el valor del atributo, son solo una sugerencia.
Nota: los atributos width y height no tienen efecto en un elemento audio, ya que no hay un componente visual que estructurar.
Nota: En cualquier momento se puede restablecer al principio el elemento de audio con JavaScript, ubicando el elemento "source" por su id y asignándole la propiedad "load()".
Incorporar subtítulos
Esto se realiza creando un archivo "WebVTT", este tipo de archivo está creado con el fin de almacenar cadenas de texto junto con metadatos para indicar en qué momento se mostrará cada cadena de texto e incluso información de estilo y posicionamiento. Las cadenas de texto se denominan señales y existen diferentes tipos con diferentes usos:
- Subtitles (Subtítulos): Son traducciones de un lenguaje extranjero usado en el video o audio.
- Captions (Leyendas): Son transcripciones de diálogos o sonidos significativos para que puedan ser entendidas en situaciones en las que no se puede escuchar el audio.
- timed descriptions (descripciones cronometradas): Texto para conversión a audio, para atender a personas con discapacidad visual.
Un ejemplo de la vista de un código WebVTT sería:
Para que este archivo se muestre junto con la reproducción de medios HTML se debe:
- Guardar el archivo ".vtt" en el lugar correcto.
- Enlazar el archivo ".vtt" con la viñeta "track". La pista debe colocarse dentro de los elementos audio o video, pero después de todos los elementos de origen (source).
- Usar la viñeta "kind" para definir si el archivo se trata de subtítulos, leyendas o descripciones.
El siguiente es un ejemplo del código resultante:
Nota: en el ejemplo se usa un elemento "video" pero también se puede usar con uno "audio".
Nota: Se puede usar JavaScript para habilitar el botón de subtítulos, y elegir entre, por ejemplo, varios lenguajes.
Nota: Los navegadores se nutren especialmente del texto, eso incluye incluso a los subtítulos de un elemento multimedia, lo cual le permite al navegador vincularse incluso con el fragmento del elemento multimedia que coincida con la búsqueda.
canvas
Se usa para crear gráficos a través de comandos JavaScript, también se puede usar para crear animaciones y hacer composiciones de fotos.
Es una etiqueta bastante reciente, así que solo está disponible en versiones recientes de los navegadores.
Atributos
- width: Se trata de la anchura del elemento, el valor predeterminado es de 300px.
- height: Se trata de la altura del elemento, el valor predeterminado es de 150px.
Sobre Accesibilidad
El elemento canvas no provee ninguna información adicional sobre los elementos que tiene dibujados. El contenido de la etiqueta canvas no se muestra a los lectores de pantalla como otras etiquetas semánticas. Como regla general, deberías evitar utilizar canvas en un sitio accesible.
Embed
Representa, junto con el elemento "object", una herramienta de incrustación de propósito general; en otras palabras, se diferencia de "iframe" ya que "embed" puede incrustar múltiples tipos de contenido externo que incluyan tecnologías de complemento como Java Applets y Flash; en otras palabras, puede ejecutar contenido externo y sus plug-in.
Nota: Un plug-in (complemento) es un software que permite que el navegador ejecute un elemento con el cual no es compatible de forma nativa.
En sí el "embed" es una tecnología heredada por HTML5, no es verdaderamente usado ya que los subprogramas con plug-in no se utilizan desde hace algunos años; pese a esto, se puede dar alguna circunstancia de que se encuentre, como puede ser en intranets o proyectos empresariales.
Atributos
- Embed incluye los atributos globales.
- height: altura mostrada en px.
- width: ancho mostrado en px.
- src: La dirección URL del recurso que se está incrustado.
- type: El tipo MIME que se va a usar para la selección del plug-in para crear una instancia.
Figure
Es una etiqueta HTML5, se trata de un contenedor con la función de vincular una imagen con un texto de pie de imagen, cumple un rol semántico.
La forma de emplearlo consiste en que este elemento contenga en su interior el elemento "img" y el elemento "figcaption".
Iframe
Esta viñeta se utiliza para incorporar documentos web en el documento actual; esto es bueno para poder incluir contenido de terceros sobre el cual no se tenga el control web dentro de la nuestra. Por ejemplo, de esto está el siguiente video el cual, pese a visualizarse en esta página, realmente ningún elemento de este se encuentra en la página; en su lugar se tomó una sección directamente de la página de YouTube y se insertó aquí de la siguiente manera:
Primero que nada, recordemos que YouTube brinda la opción de incrustar videos en otras páginas web muy fácilmente a través de los siguientes pasos:
- Primero nos dirigimos al video que deseamos incorporar.
- Luego hacemos clic en el botón "Compartir".
- Seleccionamos la opción de "insertar", y se nos brindará un código HTML con la etiqueta "iframe" ya incorporada (podemos configurar algunas cosas sobre cómo queremos que se visualice el video en nuestra página).
- Copiamos el código y lo incrustamos en el archivo HTML deseado.
El resultado es el siguiente:
Google Maps también permite hacer algo muy similar, de la siguiente forma:
- Vamos a Google Maps y buscamos el mapa que deseamos incorporar.
- Hacemos clic en el menú de la esquina superior izquierda de la página.
- Seleccionamos "Compartir o insertar mapa".
- Seleccionamos la opción de "insertar", la cual nos dará un código HTML ya estructurado.
- Copiamos el código y lo insertamos en nuestro archivo HTML para incorporarlo.
Nota: Es muy importante tomar en cuenta el tema de los derechos de autor al usar un "iframe"; lo mejor es nunca mostrar contenido del que no se sea el propietario o el dueño haya brindado un consentimiento por escrito. En el caso de que el contenido sea licenciado, se deben obtener y cumplir los términos de la licencia.
Atributos
- allowfullscreen: Si está configurado, el "iframe" se puede colocar en modo pantalla completa usando el Full Screen API.
- Frameborder: Al asignarle un valor de "1" añade un borde alrededor de todo el elemento incrustado; su valor mínimo es "0", actualmente no es recomendable su uso ya que se obtiene el mismo o mejores resultados con CSS.
- Src: Al igual que en los elementos "video", "audio", "img", contiene la ruta que apunta al documento a incrustar.
- Contenido de reserva: Al igual que un elemento "audio" o "video", el "iframe" incluye un texto que se mostrará en caso de que el navegador no soporte esta viñeta (actualmente es poco probable que se encuentre un navegador que no lo ejecute); se incorpora mediante un elemento "p" dentro de la etiqueta de apertura y de cierre del "iframe" (suele contener un enlace al documento que se pretendía insertar).
- width: Define la anchura del elemento.
- height: Define la altura del elemento.
- sandbox: Este atributo solicita una mayor configuración de seguridad en el "iframe" (requiere versiones de navegadores más recientes).
Nota: Es recomendable establecer el atributo "src" con JavaScript luego de que se cargue el contenido principal para que de esa forma la página se pueda usar antes y cargue de forma más rápida.
Seguridad
Los "iframe" son "vectores de ataque", es decir, objetivos de ataque de crackers; por lo tanto, pudiesen llegar a ser vulnerabilidades en una página web. Para esto se han desarrollado varios mecanismos y buenas prácticas para hacerlos más seguros.
Configurar el Servidor: Una de estas prácticas consiste en incluir en el servidor en el que albergue la página una configuración para evitar que la página sea incrustada en "iframe", ya que de esta forma se evita que se robe el contenido de la página y otros lo reclamen como propio o que inserten el sitio web en una página maliciosa para robar información del usuario, sin mencionar que el costo del ancho de banda consumido por ejecutar el "iframe" correría por parte de la página que está siendo insertada.
Aplicarlo solo si es necesario: Ya que los "iframes" representan un cierto riesgo, siempre es bueno limitar su uso a solo aquellos casos en los que sea necesaria su implementación.
Usar HTTPS: HTTPS es la versión encriptada de HTTP; pese a su costo, se debería de incorporar a la página web siempre que sea posible, ya que brinda dos grandes ventajas:
- Reduce las posibilidades de que el contenido remoto sea manipulado mientras se encuentra en tránsito.
- Impide que el contenido manipulado acceda al contenido padre y viceversa.
Nunca se debería de insertar contenido de terceros mediante el HTTP, debido al gran peligro que conlleva. Una buena solución es GitHub pages, el cual permite usar HTTPS por defecto, por lo tanto no es necesario tramitar el certificado de seguridad.
Siempre usar el atributo "sandbox": Básicamente consiste en brindarle al elemento y su contenido únicamente los permisos necesarios para hacer su trabajo. Un contenido sin restricciones puede hacer muchas cosas como, por ejemplo, ejecutar JavaScript, es por eso que se restringe la funcionalidad del elemento y su contenido para reducir las opciones de un cracker. El atributo "sandbox" por defecto aplica todas las restricciones posibles al elemento "iframe", pero de ser necesario se pueden volver a conceder permisos uno por uno. Un recordatorio de seguridad importante es nunca conceder el permiso de allow-scripts junto con allow-same-origin, ya que estos eventos pudiesen saltarse las medidas de seguridad y ejecutar scripts para desactivar el "sandbox" por completo.
Nota: sandbox no evita que un usuario pueda ser engañado por contenido malicioso; si existe alguna posibilidad de que el contenido pudiese ser malicioso, lo mejor es publicarlo desde un dominio diferente al principal.
Configurar directivas CSP: Esto es con exactitud la configuración de servidor que se nombró con anterioridad; consiste en programar un envío de encabezados HTTP (metadatos) para evitar que la página web se presente en un iframe.
Nota: Una buena regla de oro para la seguridad web es "Nunca puedes ser demasiado cauteloso. Si lo hizo, verifíquelo de todos modos. Si alguien más lo hizo, asuma que es peligroso hasta que se demuestre lo contrario".
Img
Esta etiqueta tiene la función de vincular archivos de imagen para que se visualicen en la página; para esto se utiliza el atributo "src".
Atributos
- src: lugar en el que se almacena la URL del archivo de imagen.
- width: Define el ancho de la imagen.
- height: Define el alto de la imagen.
- alt: Se trata de un texto alterno que describe la imagen; se usa en aquellas situaciones en las que la imagen no pueda ser mostrada, por ejemplo, si existe algún error en la carga de las imágenes, o si se utiliza algún motor de lectura en la página.
- title: Asigna un título a la imagen, sin embargo no es muy utilizado ya que únicamente muestra el título si se posiciona el raton sobre la imagen, a la vez que puede causar errores en los motores de lectura.
Nota: Los motores de búsqueda tienen en cuenta el texto alternativo al realizar alguna, pueden hacer coincidir la búsqueda con este texto.
Nota: Desactivar las imágenes es una actividad común en lugares con poco ancho de banda o un costo de internet muy alto; en estos casos el "alt" es muy útil.
Nota: Normalmente se utiliza el width y el height en CSS, sin embargo, si se usa en HTML, la página reservará el espacio asignado para la imagen aun si esta aún no ha terminado de cargar.
Imágenes Adaptables
En la web existen dos tipos de formatos de imagen, los vectoriales y las rasterizadas; estas últimas son los formatos como png y jpg los cuales consisten en código que le indica al navegador la posición de cada píxel que compone la imagen. Por ello es que la imagen se puede distorsionar cuando se altera el tamaño o proporción de esta, ya que el navegador seguirá esta estructura sin importar qué, empezará a hacer ajustes para seguir cumpliendo con esta estructura.
Debido a esto es que el cómo se aprecie una imagen en nuestra página se verá enormemente determinado por el dispositivo desde el que se ingrese y, por lo tanto, por el tamaño de la pantalla de este. Por ejemplo, si agrandamos una imagen para que cumpla con un tamaño adecuado para visualizarse desde una gran pantalla, es muy probable que esta pierda calidad y se pixele; por otro lado, si tomamos la misma imagen y la reducimos hasta poder visualizarla adecuadamente en un teléfono móvil, es probable que al ser tan pequeña no podamos apreciar adecuadamente el contenido de esta.
A esto es a lo que se refiere una imagen adaptable: se trata de ajustar la imagen al tamaño en el que será visualizada. Para ello la solución que se encontró consiste en incorporar varias imágenes en un elemento img, cada una editada para visualizarse adecuadamente en un diferente radio de píxeles. Por defecto este solo permite vincular una imagen por uso; debido a esto existen los atributos "srcset" y "sizes".
- El nombre del archivo de imagen.
- El ancho intrínseco de la imagen en píxeles. Este será el tamaño real de la imagen; es importante tener en cuenta que se utiliza la unidad "w" (o "W"), no "px" como en otros casos.
- La condición de medios en la que se indica mostrar cada imagen, por ejemplo: (max-width: 600px).
- El ancho que finalmente ocupará la imagen cuando la condición de medios se cumpla, por ejemplo: (440px). Por lo general esta se define como menor al ancho de la pantalla para no afectar la experiencia del usuario.
El siguiente es un ejemplo de código; se puede apreciar que el último conjunto de datos en el atributo "sizes" no posee condición de medios, esto se debe a que es el caso por defecto que se utilizará si ninguno de los casos anteriores se cumple. Es importante tener en cuenta el orden de los elementos, ya que el navegador elegirá el primer caso que sea compatible e ignorará todo lo que esté posterior a este.
En este código el navegador hace lo siguiente:
- Verifica el ancho del dispositivo.
- Buscará la primera condición de medios que se cumpla.
- Verificará la medida dada a la imagen en esa consulta de medios.
- Cargará la imagen en el atributo "srcset" que mejor coincida con la medida asignada para la imagen.
Los navegadores desactualizados que no soporten esta característica simplemente la ignorarán y continuarán con la carga común del atributo "src".
Una imagen en disco de 480px siempre tendrá un tamaño mucho menor que una de 800px; de ese modo se puede ahorrar ancho de banda y tiempo de carga al iniciar la página web.
Nota: Algunos dispositivos móviles mienten sobre el ancho de su pantalla lo cual no es muy útil para diseños receptivos; incluyendo (<meta name="viewport" content="width=device-width">) entre los metadatos de la página los obligas a utilizar su ancho real.
Cambiar la resolución de la imagen
Otra forma de mejorar el consumo de ancho de banda, así como el tiempo de carga de nuestra página, es la de ofrecer como opción al navegador la misma imagen pero con diferentes resoluciones; para esto se utiliza un método similar al anterior, es decir, se utiliza el atributo "srcset" haciendo referencia a múltiples imágenes, con la diferencia de que en esta ocasión el tamaño en píxeles de las imágenes no es diferente, sino que se diferencian entre sí por la calidad de cada una.
Esto se realiza con la intención de que el navegador detecte la resolución a la que está trabajando el computador y seleccione la imagen acorde a esta. Por lo tanto, si el computador está configurado con una resolución alta, el navegador seleccionará una imagen con buena resolución; por otro lado, si la configuración es para una resolución baja, el navegador seleccionará la imagen con menor resolución. Esto cobra sentido cuando tenemos en cuenta el espacio en memoria de cada imagen, ya que mientras mayor resolución mayor será el peso de la imagen; de este modo podemos buscar la eficiencia de recursos cargando solo los que sean necesarios en base al dispositivo desde el que se ingrese. Un ejemplo de este código sería el siguiente:
Figure y Figcaption
Se trata de elementos para indicar que un texto está vinculado con una imagen (pie de imagen); se trata de elementos con valor semántico para el uso de lectores de pantalla o motores de búsqueda.
La forma de emplearlo es que junto al elemento de imagen ("img") esté contenido en un "figure" y el elemento "figcaption" contenga el contenido del pie de página, de la siguiente manera:
En este ejemplo el elemento "figcaption" dice al navegador, o a alguna tecnología de apoyo, que el texto que contiene describe la imagen que está contenida en el elemento "figure".
Nota: Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo (Atributo "alt") cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto "alt" proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto "alt" no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra.
Nota: Un elemento figure podría contener varias imágenes, un trozo de código, audio, video, ecuaciones, una tabla, o cualquier otra cosa, no exclusivamente imágenes.
Object
Representa, junto con el elemento "embed", una herramienta de incrustación de propósito general; en otras palabras, se diferencia de "iframe" ya que "object" puede incrustar múltiples tipos de contenido externo que incluyan tecnologías de complemento como Java Applets y Flash; en otras palabras, puede ejecutar contenido externo y sus plug-in.
Nota: Un plug-in (complemento) es un software que permite que el navegador ejecute un elemento con el cual no es compatible de forma nativa.
En sí el "object" es una tecnología heredada por HTML5, no es verdaderamente usado ya que los subprogramas con plug-in no se utilizan desde hace algunos años; pese a esto, se puede dar alguna circunstancia de que se encuentre como puede ser en intranets o proyectos empresariales.
Picture
Se trata de un elemento contenedor al igual que "audio" y "video", que contiene varios elementos de origen los cuales proporcionan varias fuentes diferentes para que el navegador elija entre ellas. Este elemento se utiliza para volver las imágenes en elementos responsive; la estructura del elemento es la siguiente:
Como se puede observar, el elemento "picture" está compuesto por varios elementos "source", de los cuales cada uno llama a una imagen alternativa a disposición del navegador. Estos elementos contienen el atributo "media", el cual define las condiciones de medios bajo las cuales se ejecuta cada imagen alternativa, así como también poseen el atributo "srcset", el cual contiene el llamado al archivo de imagen adecuado para esas condiciones de medios.
En todo caso siempre es necesario incluir el elemento "img" antes del cierre del elemento "picture"; esto ya que brinda el "medio" en el cual se mostrarán las imágenes, así como también actuará como un recurso alternativo para aquellos casos en los que algún navegador no sea compatible con el elemento "picture".
Para crear imágenes responsive no se puede utilizar JavaScript; esto es ya que lo primero que el navegador carga es el HTML, eso incluye las imágenes. Si hacemos que se analice el ancho de la pantalla con JavaScript o CSS, para cuando estos sean interpretados las imágenes ya estarán siendo cargadas; por lo tanto, sería igual a seleccionar qué elemento se utilizará luego de haberlo descargado. En este caso se produciría una sobrecarga de los elementos; este sería el peor de los casos para un elemento responsive.
También podemos usar el elemento "picture" y el elemento "source" de una forma más tradicional para los navegadores antiguos, la cual es utilizando los atributos "type" y "sizes", por ejemplo:
Algunas cosas a tener en cuenta son:
- El atributo "media" solo se utiliza si se necesita crear imágenes responsive.
- En el elemento "source" solo se puede referenciar imágenes del tipo definido en "type".
- También se puede crear listas de referencias de elementos en los atributos "srcset" y "sizes" separando los conjuntos de datos con una coma.
Nota: Recordar que el computador simplemente elegirá el primer elemento que arroje un "verdadero", por lo que la posición de los elementos es importante.
Nota: También hay que recordar que el atributo "srcset" puede referenciar varias imágenes e incluso un atributo de tamaño, por lo que se pudiera ofrecer un conjunto de imágenes de varios tamaños e incluso diferentes resoluciones; sin embargo, siendo realistas, es poco probable que sea necesario hacerlo.
Nota: Cuando utilice "media", no ofrezca también condiciones de medios dentro del atributo de "sizes".
Video
La etiqueta video fue incorporada en HTML5, por lo que no está disponible en versiones antiguas de los navegadores, así como en aquellos que estén basados exclusivamente en el texto. Esta etiqueta permite incorporar videos fácilmente en la página; la estructura de este elemento es:
En este ejemplo se puede apreciar el "contenido de reserva"; se puede estructurar de la forma que se desee, pero en este caso se trata de un enlace que dirigirá al usuario hacia el video original para que pueda visualizarlo en algún reproductor web como YouTube. La forma de incorporar esto es con un enlace ubicado en el interior del elemento "video", con la característica de que se mostrará al usuario únicamente en los casos en los que el navegador no sea compatible con los elementos HTML5 de "video".
Atributos
Posee diversos atributos, algunos de los cuales son exclusivos de este elemento:
- src: Al igual que en otras ocasiones, en este se almacena la ruta al archivo de video a reproducir.
- Controls: Este elemento es exclusivo del elemento "video"; indica al navegador que se debe incluir la interfaz de control de video del navegador. También se puede usar para crear una propia usando JavaScript.
- El párrafo dentro de la etiqueta Video: Se mostrará en aquellas situaciones en las que el navegador no soporte la etiqueta "video".
- width: Define el ancho del recuadro de video en la página.
- height: Define el alto del recuadro de video en la página.
- Autoplay: Indica una reproducción automática del elemento mientras la página se carga; no es muy recomendable usarlo ya que los usuarios pueden encontrarlo molesto.
- Loop: Hace que el vídeo (o audio) comience a reproducirse cada vez que finaliza. Esto también puede llegar a resultar molesto para los usuarios.
- Muted: Hace que los medios se reproduzcan con el sonido apagado de forma predeterminada.
- Poster: La URL de una imagen que se mostrará antes de reproducir el vídeo. Está destinado a ser utilizado para la miniatura del vídeo.
-
Preload: Se utiliza para almacenar en memoria los archivos grandes. Puede tomar uno de estos tres valores:
- None: no almacena el archivo en el búfer.
- Auto: almacena el archivo multimedia.
- Metadata: almacena solo los metadatos del archivo.
Compatibilidad
Ya que se están incluyendo elementos multimedia a la página, entra en vigor un tema bastante importante: el formato del elemento. Este es un aspecto indispensable al incorporar videos a una página web, debido a que existen varios formatos de audio y video, así como varias formas de reproducirlos; por ello, dependiendo del navegador que se utilice, algunos de estos pueden no ser compatibles. Esto puede originar que, según cuál sea el formato del elemento que se esté incorporando en la página, este no podrá ser visualizado en algunos navegadores.
Esta discrepancia entre los navegadores se debe a que algunos de los formatos de audio y video están sujetos a patentes, lo que imposibilita su empleo en aquellos que no se encuentren autorizados; por lo tanto, estos navegadores recurren a formatos alternos que les brinden desempeños similares.
A la hora de implementar un video en la página existen en la actualidad dos formatos establecidos: el formato "mp4" (principalmente soportado en Internet Explorer y Safari) y el formato "webm" (principalmente soportado por Firefox y Chrome), ya que cada uno funciona en algunos navegadores y en otros no.
Lo recomendable al incorporar un video en una página web es que se incluya el archivo una vez por cada formato dentro de la etiqueta "source", es decir, se utiliza dos veces el elemento "source" con el atributo "src" en su interior: una ocasión para el elemento en formato "mp4" y otra para el elemento en formato "webm", de la siguiente forma:
Esto se hace ya que el elemento "source" apunta a la propia fuente del navegador; por lo tanto, el navegador elegirá el primer formato que este soporte. El elemento "source" también cuenta con el atributo "type", el cual le indica al navegador el formato en el que se encuentra cada elemento; el navegador puede leer este atributo y de este modo omitir los formatos no compatibles ejecutando solo los que sea capaz de reproducir, ahorrando de este modo recursos y tiempo. Con la implementación de estos dos formatos, el video debería poder ser ejecutado en casi todos los navegadores.
Nota: Como mínimo, la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen.
Incorporar subtítulos
Esto se realiza creando un archivo "WebVTT"; este tipo de archivo está creado con el fin de almacenar cadenas de texto junto con metadatos para indicar en qué momento se mostrará cada cadena de texto e incluso información de estilo y posicionamiento. Las cadenas de texto se denominan señales y existen diferentes tipos con diferentes usos:
- Subtitles (Subtítulos): Son traducciones de un lenguaje extranjero usado en el video o audio.
- Captions (Leyendas): Son transcripciones de diálogos o sonidos significativos para que puedan ser entendidas en situaciones en las que no se puede escuchar el audio.
- timed descriptions (descripciones cronometradas): Texto para conversión a audio, para atender a personas con discapacidad visual.
Un ejemplo de la vista de un código WebVTT sería:
Para que este archivo se muestre junto con la reproducción de medios HTML se debe:
- Guardar el archivo ".vtt" en el lugar correcto.
- Enlazar el archivo ".vtt" con la etiqueta "track". La pista debe colocarse dentro de los elementos audio o video, pero después de todos los elementos de origen (source).
- Usar la etiqueta "kind" para definir si el archivo se trata de subtítulos, leyendas o descripciones.
El siguiente es un ejemplo del código resultante:
