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.