HTML5 - Conteúdo incorporado e multimídia
Tags: webdev, beginners, html
Published: 2023-09-16 18:41:33

Neste artigo, aprenderemos sobre o conteúdo **embutido** e **multimídia** em HTML, como **imagem**, **vídeo**, **áudio** e **iframe**.

## Figuras

Existe uma forma de inserir figuras em uma página com o elemento `img`. É um elemento de auto-fechamento, ou seja, o elemento `<img>` se fecha na tag de abertura.

Entre os atributos possíveis para este elemento, os mais importantes são:
- `src`: significa fonte e é um atributo obrigatório, pois o texto (string) com o URL/link da imagem é indicado aqui.
- `alt`: significa texto alternativo e é obrigatório para acessibilidade. Você deve indicar um texto alternativo (descrição) para a imagem no atributo `alt`.
- `width`: a largura da imagem pode ser configurada por este atributo, mas é recomendável que o tamanho da imagem, sempre que possível, seja configurado em CSS.
- `height`: a altura da imagem pode ser configurada por este atributo, mas é recomendável que o tamanho da imagem, sempre que possível, seja configurado em CSS.
- `srcset`: significa conjunto de fontes. Este é um atributo incrível, pois permite usar várias imagens para um elemento, criando uma imagem **responsiva**.

> Geralmente, o **adaptável** usa dois ou mais arquivos diferentes para a mesma imagem, cada arquivo com um tamanho diferente e para um tamanho de tela de dispositivo diferente. O **responsivo** geralmente usa o mesmo arquivo, mas altera seu tamanho.

**Exemplo:**

O tamanho original da imagem é de 200 x 100 pixels (`width` é 200 e `height` é 100). A proporção é de 2 para 1. Se você indicar `width="400"`, sua imagem será de 400 x 200. Mas se você indicar `width="400"` e `height="300"`, a proporção será alterada, e a imagem aparecerá distorcida. Você entende?

Abaixo, você pode ver um trecho de código:

```html
<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" />

<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" width="100" />

<img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" height="50" />
```

![Elementos Img renderizados.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41eulnznbyylg3ov8yf1.png)

## Picture

Uma alternativa **adaptável** à `srcset` do elemento `img` é o elemento `picture`. Neste elemento, você indica diferentes fontes e um elemento `img` é usado como fallback.

Veja este exemplo:

```html
<picture>
  <source media="(max-width: 799px)" srcset="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" />
  <source media="(min-width: 800px)" srcset="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=1200" />
  <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=720" alt="Cristo Redentor" />
</picture>
```

- `<picture>`: Este é um elemento de contêiner usado para fornecer várias fontes para um elemento `<img>`.
- `<source>`: Esses elementos são usados dentro do elemento `<picture>` para especificar diferentes fontes (imagens) com base em condições de consulta de mídia.

**Vídeo**

Para incluir um vídeo em sua página, você pode usar o elemento `video`. Aqui está um exemplo:

```html
<video src="link-video.mp4" type="video/mp4">
  Seu navegador não suporta o elemento <code>video</code>.
</video>
```

Você pode incluir:
- Trilhas, como vídeos com áudios em diferentes idiomas.
- Largura e altura como o elemento `img`.
- Repetição, se o vídeo for reproduzido em um loop.

Mais informações podem ser acessadas em [video: O Elemento de Incorporação de Vídeo](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Video).

**Áudio**

Para incluir áudio em uma página, você pode usar o elemento `audio`. Aqui está um exemplo:

```html
<audio src="https://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Seu navegador não suporta o elemento <code>audio</code>.
</audio>
```

Você pode incluir:
- Trilhas, como vídeos com diferentes idiomas.
- Repetição, se o áudio for reproduzido em um loop.

Mais informações podem ser acessadas em [audio](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Audio).

## Figure

O elemento `figure` é útil quando você precisa inserir conteúdo independente, como imagens, código ou vídeos dentro do seu conteúdo, opcionalmente com uma legenda.

Nesse cenário, o `figure` é um bom elemento para usar. Aqui está um exemplo:

```html
<figure>
  <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?w=640" alt="Cristo Redentor" />
  <figcaption>Cristo Redentor no Brasil.</figcaption>
</figure>
```

Você pode usar o elemento `figure` para vários tipos de conteúdo, não apenas imagens. Ele pode ser usado para vídeos, código e muito mais.

## Iframe

Finalmente, você pode incluir conteúdo incorporado, como vídeos do YouTube ou até mesmo outra página da web, usando o elemento `iframe`. Este elemento cria um espaço com um contexto individual, funcionando como conteúdo separado dentro da sua página.

Aqui está um exemplo com dois elementos `iframe`:

```html
<iframe src="https://www.google.com/webhp?igu=1" width="500" height="400">
  <p>Seu navegador não suporta iframes.</p>
</iframe>
<iframe src="page.html" width="400" height="400">
  <p>Seu navegador não suporta iframes.</p>
</iframe>
```

O `iframe` permite especificar um URL de um recurso no atributo `src`, indicar atributos `width` e `height`, e fornece uma mensagem de fallback se o navegador não suportar iframes.


### Vídeo do Youtube

Outro uso comum para `iframes` é incorporar vídeos do YouTube. Aqui está um exemplo:

```html
<iframe width="560" height="315" src="https://www.youtube.com/embed/sYmjU2mYc1o?si=DIANF95yhkCnOjBN" title="Player de Vídeo do YouTube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
```

Este `iframe` incorpora um player de vídeo do YouTube com dimensões específicas, URL de origem e várias permissões para habilitar recursos como reprodução automática e modo tela cheia.

### Visualizador de PDF

Uma coisa interessante que podemos fazer com um **iframe** é exibir um PDF (como um **Visualizador de PDF**) em sua página. Em outras palavras, podemos incorporar um PDF em uma página. O **código abaixo** mostra essa funcionalidade.

```html
<iframe src="https://www.tutorialspoint.com/html/html_tutorial.pdf" width="400" height="600" frameborder="0" allowfullscreen></iframe>
```

No entanto, o exemplo acima não funciona porque é comum o servidor indicar que o conteúdo incorporado só funciona se estiver na mesma origem, como o mesmo site. Portanto, se o seu PDF estiver em seu site, está tudo bem, ele funcionará.

Para contornar esse problema, podemos usar o visualizador de documentos do Google, como no **exemplo abaixo**:
```html
<iframe src="https://docs.google.com/viewerng/viewer?url=https://www.tutorialspoint.com/html/html_tutorial.pdf&embedded=true" frameborder="0" height="500" width="400"></iframe>
```

Este código será renderizado como na **imagem abaixo**.

![IFrame com visualização de PDF incorporado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy6vubbo9acq1krvac4n.png)

## O que Vem Pela Frente

Nos próximos artigos, você explorará listas ordenadas, listas de marcadores e definições, bem como detalhes em HTML. Fique ligado!

## Referências

- MDN WEB DOCS. [Imagens Responsivas](https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). Acessado em 16 de setembro de 2023.
- WHATWG. [HTML Living Standard](https://html.spec.whatwg.org/multipage/#toc-dom). Acessado em 16 de setembro de 2023.