Tags relacionadas com mídia

Este artigo explica as tags relacionadas com mídia.

Explica como descrever imagens, vídeos, áudio, etc. em HTML, além de elementos colapsáveis e frames embutidos.

YouTube Video

Tags relacionadas com mídia

Tag <img>

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• A tag <img> é usada para incorporar imagens. O atributo src especifica o caminho da imagem, e o atributo alt fornece uma descrição quando a imagem não pode ser exibida.

Tags <figure> e <figcaption>

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• A tag <figure> agrupa conteúdo de mídia como imagens ou ilustrações juntamente com uma legenda usando a tag <figcaption>.

Tag <picture>

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• A tag <picture> é usada para suportar imagens responsivas, permitindo que a imagem apropriada seja selecionada com base em diferentes condições de exibição.

• O atributo media especifica condições no mesmo formato que as consultas de mídia CSS.

  • Você pode especificar condições como a largura mínima (min-width), largura máxima (max-width) ou orientação da tela (orientation).

• Neste exemplo, as seguintes imagens são exibidas dependendo da largura da tela.

  • Se a largura da tela for 800px ou mais, large.jpg será exibido.
  • Se a largura da tela for 400px ou mais, mas menos que 800px, medium.jpg será exibido.
  • Se a largura da tela for menor que 400px, small.jpg (a imagem na tag <img>) será exibido.

Tag <canvas>

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• A tag <canvas> fornece uma região onde gráficos dinâmicos podem ser desenhados usando JavaScript.

Tag <map>

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• A tag <map> é usada para definir um mapa de imagem. Áreas clicáveis dentro do mapa são definidas usando a tag <area>. Isso permite que partes específicas de uma imagem sejam clicáveis, levando a um link.
• Especifique o nome do elemento do mapa associado (tag <map>) no atributo usemap da tag <img>, precedido por #.
• Especificando adequadamente o atributo alt da tag <area>, você pode melhorar a acessibilidade para usuários com deficiência visual.

Tag <embed>

1<embed src="movie.mp4" width="300" height="200">

• A tag <embed> é usada para incorporar conteúdo externo como PDFs, vídeos ou áudio.

Tag <video>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• A tag <video> é usada para incorporar conteúdo de vídeo. Você pode especificar vários formatos usando a tag <source>.

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• O atributo preload permite especificar a quantidade de um vídeo que deve ser carregada pelo navegador antes do início da reprodução.
  • auto instrui o navegador a pré-carregar toda a mídia. Isso pode reduzir o atraso no início da reprodução, mas os dados podem ser baixados mesmo que o usuário não reproduza a mídia.
  • metadata carrega apenas os metadados da mídia (por exemplo, duração, informações de faixas). Os dados da mídia em si não são carregados até que o usuário inicie a reprodução. Isso é adequado quando você precisa de informações resumidas sobre a mídia.
  • none não pré-carrega o arquivo de mídia. A mídia não baixa recursos até que a reprodução seja iniciada. Isso é adequado quando você deseja minimizar o uso de dados.

Tag <audio>

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• A tag <audio> é usada para incorporar conteúdo de áudio. A tag <source> suporta vários formatos.
• Assim como a tag <video>, o atributo preload pode ser usado para especificar a quantidade de áudio que deve ser carregada antes do início da reprodução.

Tag <track>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• A tag <track> é usada para especificar faixas de texto, como legendas e legendas ocultas. Ela pode ser usada dentro das tags <audio> ou <video>.
• O atributo kind permite especificar a finalidade da faixa (por exemplo, legendas, legendas ocultas, capítulos, etc.). Você pode especificar os seguintes valores.
  • subtitles fornece legendas que traduzem o conteúdo de vídeo ou áudio ou o tornam mais fácil de entender para os espectadores. Seu principal objetivo é a tradução direta do áudio.
  • captions fornece informações adicionais, como música e efeitos sonoros, para pessoas surdas ou com deficiência auditiva, além do áudio.
  • descriptions são faixas que descrevem o conteúdo visual de um vídeo, como ações e cenários, para pessoas com deficiência visual.
  • chapters fornece marcadores de capítulo (títulos de capítulo) para indicar pontos específicos dentro do vídeo.
  • metadata fornece informações adicionais para análise ou processamento da mídia, mas não é exibido para os usuários.

Tag <iframe>

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• A tag <iframe> é usada para incorporar outras páginas HTML ou conteúdo externo (como sites, vídeos ou documentos) na página atual. Ela é frequentemente usada para incorporar vídeos do YouTube em uma página.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video