Multimedia en HTML

Desarrollo de Aplicaciones Web

Contenido:


  1. Imágenes
  2. Mapas de imágenes
  3. Objetos
  4. Vídeo
  5. Audio

Imágenes

Imágenes

  • Imágenes de contenido: proporcionan información y complementan la información textual


  • Imágenes de adorno: se utilizan para hacer bordes redondeados, iconos en las listas de elementos, mostrar fondos de página, ...


  • Etiqueta <img>


  • Imágenes

  • src = "url". URL de la imagen


  • alt = "texto". Descripción corta


  • longdesc = "url". URL donde puede encontrarse una descripción detallada


  • name = "texto". Nombre del elemento imagen


  • height = "unidad_de_medida", Altura con la que se debe mostrar


  • width = "unidad_de_medida". Anchura con la que se debe mostrar


  • Unidades de uso legal en España, Sistema Internacional de Unidades


    Imágenes

    HTML 5.1 incorpora un nuevo sistema para utilizar imágenes de forma más flexible, para ello, utiliza las etiquetas:


  • Etiqueta <picture>

    Agrupa una serie de imágenes. Etiqueta contenedora.


  • Etiqueta <source>

    Mostrará la imagen que cumpla una serie de criterios opcionales.


  • Imágenes

    <source> tiene una serie de atributos disponibles:


    Atributo Descripción
    srcset Serie de imágenes (separadas por coma) que se utilizarán. Obligatorio.
    sizes Tamaño específico de la imagen que finalmente se mostrará.
    media Condición que se debe cumplir para que muestre la imagen.
    type Tipo de formato de imagen. Opcional.

    Imágenes

    Formatos de imágenes soportados:

  • PNG. Soporta transparencia. Compresión sin pérdidas. Imágenes «lisas».


  • JPG. Compresión con pérdidas. Ideal para imágenes con texturas.


  • SVG. Formato vectorial. Ideal para imágenes escalables.


  • GIF. Formato para imágenes pequeñas y animadas.


  • WEBP, Alternativa libre de Google al JPEG. Soporta transparencias.


  • JPEG2000. Evolución del JPEG.


  • JPEGXR. Alternativa libre de Microsoft al JPEG.


  • APNG. Alternativa libre a GIF. Compatible con PNG. Soporta animaciones.


  • Imágenes

    Formato SVG

  • Los mapas de bits son una matriz de puntos o píxeles. El tamaño de la tabla es conocido como la resolución de la imagen.


  • En SVG lo que se almacena son las instrucciones para dibujar la imagen.


  • La principal ventaja de los gráficos vectoriales es que son independientes de la resolución.


  • Si la imagen tiene texto, este puede ser indexado por los buscadores.


  • Imágenes

    Ventajas formato SVG

    • Suelen ser más pequeñas que los mapas de bits equivalentes.

    • No pierden calidad al modificarlas.

    • El contenido de la imagen forma parte del DOM.

    • Más rápido dibujando elementos grandes.

    • El canvas requiere programar con JavaScript, con svg no es necesario.

    Imágenes

    Desventajas formato SVG


    • El contenido de la imagen forma parte del DOM, y aumenta la complejidad del mismo.

    • Más lento dibujando muchos elementos.

    Imágenes

    Ejemplo formato SVG


    <!DOCTYPE html>
    <html lang="es"> <head> <meta charset="UTF-8">< <title>Ejemplo de SVG</title> </head> <body> <svg width="100" height="100" style="border: 1px solid black"> <circle cx="50" cy="50" r="40" fill="transparent" stroke="black"> </circle> </svg> </body> </html>

    Imágenes

    Ejemplos en HTML 5.1:


    Permite indicar más de un formato, y actuará según el navegador
    <picture>
      <source srcset="img.jxr"> <!-- JPEG XR -->
      <source srcset="img.webp"> <!-- WebP -->
      <img src="img.jpg" alt="Imagen de prueba"> <!-- Navegador en modo texto -->
    </picture>
    

    Se muestran diferentes imágenes dependiendo de la resolución de pantalla (ancho) del dispositivo
      <picture>
      <source media="(min-width: 600px)" srcset="img-mg.png">
      <source media="(min-width: 300px) and (max-width: 600px)" srcset="img-g.png">
      <source media="(max-width: 50px)" srcset="img-p.png">
      <img src="img-habitual.png" alt="Imagen habitual">
      </picture>
    

    Mapas de imágenes

    Mapas de imágenes

  • De interés en casos específicos, como por ejemplo sitios de predicciones meteorológicas o agencias de viajes. Muchas webs usan en su lugar Adobe Flash


  • Permiten definir diferentes zonas seleccionables dentro de una imagen


  • Las zonas se crean mediante rectángulos, círculos y polígonos


  • Para crear un mapa se inserta la imagen original mediante la etiqueta <img>


  • A continuación, se utiliza la etiqueta <map> para definir zonas


  • Cada zona se define mediante la etiqueta <area>


  • Mapas de imágenes

  • <map>


  • - name = "texto". Nombre que identifica al mapa definido (nombre único)


  • <area>


  • - href = "url". URL al que se accede al seleccionar el área


    - nohref = "nohref". Áreas que no son seleccionables


    - shape = "default | rect | circle | poly". Tipo de área que se define


    - coords = "lista de números". Números separados por comas que representan las coordenadas del área


    Mapas de imágenes

    <html>
    <head>
    <title>Uso de imagenes</title>
    </head>
    
    <body>
    <map name="map1"> <area
       href="cuadrado.html" alt="Cuadrado" shape=rect coords="0,75,100,175">
    <area href="circulo.html" alt="Círculo" shape=circle coords="175,50,50">
    <area href="triangulo.html" alt="Triángulo" shape=poly coords="125,250, 225,250, 175,165">
    </map>
    
    <img src="http://www.um.es/docencia/barzana/IMGTEORIA/map-ejemplo.gif"
       border="0" width="225" height="251" usemap="#map1">
    </body>
    </html>
    

    Objetos

    Objetos

    HTML permite incluir otros elementos más complejos, como applets de Java y vídeos en formato QuickTime o Flash. El navegador precisa de plugins

  • <object>


  • - data = "url". Indica la URL de los datos que utiliza el objeto

    - classid, codebase, codetype. Información específica del tipo de objeto

    - type. Indica el tipo de contenido de los datos

    - height = "unidad_de_medida". Indica la altura con la que se debe mostrar

    - width = "unidad_de_medida". Indica la anchura con la que se debe mostrar

    Objetos

    A los objetos también se les puede pasar información adicional en forma de parámetros mediante la etiqueta

  • <param>

  • - name = "texto". Indica el nombre del parámetro

    - value = "texto". Indica el valor del parámetro

    Objetos

    Iframes son espacios en una página web que permiten visualizar otro sitio


  • <iframe>

  • - src = "url". URL del documento HTML que se visualiza en el iframe

    - height = "longitud". Altura que ocupará el iframe en el documento

    - width = "longitud". Anchura que ocupará el iframe en el documento

    - name = "texto". Nombre que identifica al iframe

    - longdesc = "url". Dirección con una descripción larga del contenido del iframe

    - scrolling = "yes | no | auto" . Indica si debe mostrar barras de scroll (horizontal y vertical) cuando el contenido incluido no cabe

    Vídeo

    Vídeo

    Es posible incrustar vídeos sin usar las instrucciones para objetos


  • <video>

    Atributo Valor Descripción
    src Dirección URL Video a reproducir. Obligatoria si actúa como etiqueta contenedora.
    poster Dirección URL Muestra una imagen a modo de presentación.
    preload auto | metadata | none Indica como realizar la precarga del vídeo.
    mediagroup nombre Establece un nombre para un grupo de contenidos multimedia.
    autoplay - Comienza a reproducir el vídeo automáticamente.
    loop - Vuelve a iniciar el vídeo cuando finaliza su reproducción.
    muted - Establece el vídeo sin sonido.
    controls - Muestra los controles de reproducción.
    width tamaño Indica el tamaño de ancho del vídeo.
    height tamaño Indica el tamaño de alto del vídeo.
  • Vídeos

    Formatos de vídeo soportados:


    Formato Codec utilizado Características
    MP4 x264, DivX H264 Alta calidad. Codec x264 libre.
    WebM VP8, VP9 Alternativa libre a MP4 de Google.
    Ogv Theora Alternativa libre a MP4.
    MKV Matroska Buena compresión. Potente.
    AVI XviD, DivX 3/5 Menor compresión que MP4.
    HEVC x265, DivX HEVC Futura evolución de MP4.

    Vídeo

    Formatos alternativos:


    La etiqueta <video> puede actuar como etiqueta contenedora e incluir varias etiquetas HTML para dotar de mayor compatibilidad, o capacidades adicionales.
    Etiqueta Atributos Descripción
    <source> src, type Establece un archivo de vídeo o lo añade como alternativa.
    <track> src, srclang, label, kind, default Establece un archivo de subtítulos o lo añade como alternativa.

    Vídeo

    Etiquetas modo avanzado:


    Ejemplo
      	<video width="640" height="480">
      	<source src="video.mp4" type="video/mp4">
      	<source src="video.webm" type="video/webm">
      	<source src="video.ogv" type="video/ogg">
      	<img src="imagen.png" alt="Vídeo no soportado">
      	Este navegador no soporta contenido multimedia.
      </video>
    

    El navegador no mostrará todos los contenidos, sino que seguirán el orden: Formato MP4, si el navegador no lo soporta, salta al siguiente. Intenta mostrar el WEBM, si el navegador no lo soporta, salta al siguiente. Intenta mostrar el formato OGV. Si el navegador no lo soporta, salta al siguiente. Si se trata de un navegador que no soporta HTML5, intentará mostrar la imagen. Si se trata de un navegador de terminal de texto, aparece un rótulo.

    Audio

    Audio

    Es posible incrustar audio sin usar las instrucciones para objetos, ni emplear la etiqueta obsoleta <bgsound>


  • <audio>

    Atributo Valor Descripción
    src Dirección URL Audio a reproducir. Obligatoria si actua como etiqueta contenedora.
    preload auto | metadata | none Indica como realizar la precarga del audio.
    mediagroup nombre Establece un nombre para un grupo de contenidos multimedia.
    autoplay - Comienza a reproducir el audio automáticamente.
    loop - Vuelve a iniciar el audio cuando finaliza su reproducción (bucle).
    muted - Establece el audio sin sonido (silenciado).
    controls - Muestra los controles de reproducción. Por defecto no se muestran.
  • Audios

    Formatos de audio soportados:


    Formato Codec utilizado Características
    MP3 MPEG Layer-3 Buena calidad.
    OGG Ogg Vorbis Buena calidad. Alternativa libre a MP3.
    AAC Advanced Audio Coding Mejora el MP3. Usado como audio en MP4.
    Opus Opus Buena calidad. Alternativa libre a MP3.
    FLAC FLAC Audio Lossless Compresión sin pérdidas. Alto tamaño.
    WAV Wave sound Formato de Microsoft.

    Audio

    Etiquetas modo avanzado:


    Etiqueta Atributos Descripción
    <source> src, type Establece un archivo de audio o lo añade como alternativa.
    <track> src, srclang, label, kind, default Establece un archivo de subtítulos o lo añade como alternativa.

    Vídeo

    Etiquetas modo avanzado:


    Ejemplo
    <audio>
    	<source src="audio.opus">
    	<source src="audio.ogg">
    	<source src="audio.mp3">
    	</audio>
    

    El navegador intentará reproducir el archivo en formato Opus, en caso de no soportarlo intentará reproducir el formato Ogg Vorbis, y en caso de tampoco soportarlo, reproducirá el formato MP3.