HTML5 - Conteúdo incorporado e multimídia

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:

<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" />

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:

<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:

<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.

Áudio

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

<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.

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:

<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:

<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:

<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.

<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:

<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.

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. Acessado em 16 de setembro de 2023.
• WHATWG. HTML Living Standard. Acessado em 16 de setembro de 2023.