Skip to main content

Multimèdia i Iframes

En aquest capítol veurem com inserir imatges adaptatives, vídeos, àudios i contingut extern com mapes o vídeos de YouTube amb <iframe>.

<picture>: Imatges adaptatives​

Permet carregar imatges diferents segons mida de pantalla o densitat de píxels (pantalles retina).

<picture>
  <source srcset="imatge-xl.jpg" media="(min-width: 1200px)" />
  <source srcset="imatge-md.jpg" media="(min-width: 768px)" />
  <source srcset="imatge-sm.jpg" />
  <img src="imatge-sm.jpg" alt="Descripció" width="100%" />
</picture>

També es pot especificar densitat (1x, 2x, 3x) dins de srcset.

<video>: Inserir vídeos​

<video
  src="video.mp4"
  controls
  width="480"
  height="270"
  poster="preview.jpg"
></video>

Atributs útils​

  • controls: mostra controls de reproducció
  • autoplay, muted, loop
  • poster: imatge prèvia
  • width, height

Subtítols amb <track>​

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track
    src="subtitles.vtt"
    kind="subtitles"
    srclang="ca"
    label="Català"
    default
  />
</video>

<audio>: Inserir so​

<audio src="audio.mp3" controls></audio>
  • controlslist="nodownload" per evitar descàrregues
  • autoplay, loop, muted disponibles

<iframe>: Incrustar contingut extern​

<iframe
  src="https://www.youtube.com/embed/ID"
  title="Vídeo de YouTube"
  frameborder="0"
  allowfullscreen
  width="560"
  height="315"
>
</iframe>

Atributs útils​

  • scrolling, sandbox, allowfullscreen, title
  • Permet carregar mapes, vídeos, PDF, formularis externs...

Aquest mòdul et permetrà fer pàgines multimèdia riques i modernes, millorant l’experiència visual i interactiva dels teus usuaris.