Mídia HTML ou Multimídia
Neste artigo, exploraremos a mídia HTML em detalhes, incluindo os diferentes tipos de mídia que podem ser incorporados usando HTML, as tags e os atributos usados para incorporar mídia e as práticas recomendadas para usar mídia HTML no desenvolvimento da web.
Mídia HTML – o que é?
Mídia HTML refere-se a qualquer tipo de conteúdo que pode ser consumido pelos usuários, como imagens, vídeos e áudio.
O HTML fornece várias tags e atributos que permitem incorporar mídia em páginas da Web, tornando o conteúdo mais atraente e interativo.
O HTML oferece suporte a vários tipos de mídia, incluindo:
| tipos | Visão geral |
| Imagens | As imagens são o tipo de mídia mais comum usado no desenvolvimento da web. Eles podem ser usados para aprimorar o apelo visual de uma página da Web ou para transmitir informações ao usuário. As imagens podem estar em vários formatos, como JPEG, PNG e GIF. |
| Vídeos | Os vídeos podem ser incorporados em páginas da web usando HTML. Eles podem ser usados para fornecer conteúdo instrucional ou entretenimento ao usuário. Os vídeos podem estar em vários formatos, como MP4, WebM e Ogg. |
| áudio | HTML também suporta a incorporação de arquivos de áudio em páginas da web. Os arquivos de áudio podem ser usados para fornecer música de fundo ou efeitos sonoros ao usuário. O áudio pode estar em vários formatos, como MP3, WAV e Ogg. |
Formatos de Mídia Html
O formato de mídia HTML armazena elementos multimídia (como áudio e vídeo) em arquivos de mídia.
Observando a extensão do arquivo, geralmente você pode determinar que tipo de arquivo é um arquivo.
Existem vários formatos e extensões para arquivos multimídia como: .wav, .mp3, .mp4, .mpg, .wmv e .avi.
Formatos de vídeo comumente usados :
 |
Há uma variedade de formatos de vídeo disponíveis.
O HTML suporta os formatos MP4, WebM e Ogg. De acordo com o YouTube, os arquivos MP4 são o tipo de arquivo mais adequado. |
| Formatar | Arquivo | Visão geral |
|---|---|---|
| AVI | .avi | AVI (intercalação de áudio e vídeo). Um produto da Microsoft. Freqüentemente usado em equipamentos de TVs e câmeras de vídeo. Adequado para computadores Windows, mas não compatível com navegadores da web. |
| MPEG | .mpg .mpeg |
Um projeto do Moving Pictures Expert Group. O primeiro formato de vídeo amplamente utilizado na Internet. Não é compatível com HTML. |
| Tempo rápido | .mov | O reprodutor do QuickTime. Um produto da Apple. Isso é frequentemente usado em câmeras de vídeo e hardware de televisão. Adequado para computadores Apple, mas não compatível com navegadores da web. |
| WMV | .wmv | WMV (vídeo do Windows Media). O produto da Microsoft. Câmeras de vídeo e hardware de TV costumam usar esse componente. Adequado para computadores Windows, mas não compatível com navegadores da web. |
| Vídeo real | .rm .ram |
O RealVideo não é compatível com navegadores da Web e não facilita a mídia HTML. Desenvolvido pela Real Media para permitir streaming de vídeo com baixa largura de banda. |
| Ogg | .ogg | Teora Ogg. Produto da Fundação Xiph.Org. Permitido por HTML . |
| WebM | .webm | Criado por Mozilla, Opera, Adobe e Google. Permitido por HTML. |
| Clarão | .swf .flv |
Clarão. Produzido pela Macromedia. Muitas vezes é necessário instalar um componente adicional (plug-in) para jogar em navegadores da web. |
| MPEG-4 ou MP4 |
.mp4 | Produto do Moving Pictures Expert Group. Câmeras de vídeo e hardware de TV frequentemente usam esse componente. A compatibilidade é suportada por todos os navegadores e preferida pelo YouTube. |
IMPORTANTE: padrão HTML/mídia HTML suporta apenas vídeos MP4 , WebM e Ogg .
Formatos de áudio
Quando se trata de mídia HTML, o MP3 é o formato preferido para música gravada compactada. No mundo da música digital, MP3 é sinônimo de música digital.
O formato de arquivo MP3 é mais adequado para sites que apresentam música gravada.
RealAudio.rm
.ram Um produto da Real Media. Para fornecer streaming de baixa latência de largura de banda de áudio. Os navegadores da Web não suportam este vídeo.
| Formatar | Arquivo | Visão geral |
|---|---|---|
| WMA | .wma | WMA (áudio do Windows Media). O produto da Microsoft. Adequado para computadores Windows, mas não compatível com navegadores da web. |
| MIDI | .mid .midi |
Todos os dispositivos eletrônicos usam esse formato. Placas de som e sintetizadores de PC estão entre os dispositivos que produzem música. Um arquivo MIDI contém notas digitais, mas nenhum som.
Os navegadores da Web não suportam este software, embora funcione em todos os computadores e hardware de música. |
| Ogg | .ogg | Produto da Fundação Xiph.Org. Compatível com HTML. |
| MP4 | .mp4 | O formato MP4 pode ser usado tanto para vídeo quanto para áudio. Compatível com todos os navegadores. |
| MP3 | .mp3 | Os arquivos MP3 são o componente de som dos arquivos MPEG.
Os tocadores de música geralmente são equipados com tocadores de MP3. Ele fornece um bom equilíbrio Otimização de pequenos arquivos de alta qualidade. Compatível com todos os navegadores. |
| AAC | .aac | Formato de codificação de áudio avançado – a Apple usa como padrão para produtos iTunes. Adequado para computadores Apple, mas não compatível com navegadores da web. |
| WAV | .wav | Produto da IBM e da Microsoft. Adequado para sistemas operacionais Windows, Macintosh e Linux. Compatível com HTML. |
Importante: HTML suporta apenas áudio MP3, WAV e Ogg.
Tags e atributos de mídia HTML
O HTML fornece várias tags e atributos que permitem incorporar mídia em páginas da web.
Aqui estão algumas das tags e atributos mais usados:
A etiqueta <img>
A tag <img> é usada para incorporar imagens em páginas da web. O atributo src é usado para especificar a URL do arquivo de imagem.
O atributo alt é usado para fornecer uma descrição textual da imagem para usuários que não podem ver a imagem.
<img src="image.jpg" alt="A picture of a cat">
A tag <vídeo>
A tag <video> é usada para incorporar vídeos em páginas da web.
O atributo src é usado para especificar a URL do arquivo de vídeo.
O atributo de controles é usado para exibir os controles de reprodução, como reproduzir, pausar e volume.
O atributo do pôster é usado para especificar uma imagem a ser exibida antes do início da reprodução do vídeo.
<video src="video.mp4" controls poster="poster.jpg"> Your browser does not support the video tag. </video>
Para obter o guia completo, visite nossa postagem de tags de vídeo html .
A tag <audio>
A tag <audio> é usada para incorporar arquivos de áudio em páginas da web.
O atributo src é usado para especificar a URL do arquivo de áudio.
O atributo de controles é usado para exibir os controles de reprodução, como reproduzir, pausar e volume.
<audio src="audio.mp3" controls> Your browser does not support the audio tag. </audio>
Compatibilidade dos navegadores:
A mídia HTML permitia que os navegadores da Web exibissem apenas texto e apenas uma fonte em uma cor no passado.
Cores , fontes, imagens e multimídia foram adicionados posteriormente pelos navegadores.
Práticas recomendadas de mídia HTML
Aqui estão algumas práticas recomendadas para usar mídia HTML.
- Use formatos de arquivo apropriados para diferentes tipos de mídia. Por exemplo, use JPEG para imagens com gradientes de cores complexos e PNG para imagens com fundos transparentes.
- Otimize os arquivos de mídia para reduzir seu tamanho e melhorar o tempo de carregamento da página. Use ferramentas como Photoshop ou GIMP para reduzir o tamanho do arquivo de imagem sem sacrificar a qualidade. Use um software de compactação de vídeo para reduzir o tamanho dos arquivos de vídeo.
- Forneça texto alternativo para imagens e conteúdo de vídeo. O texto alternativo permite que os usuários que não podem ver a mídia entendam o que ela representa.
- Use a reprodução automática com moderação para conteúdo de vídeo e áudio. A reprodução automática pode ser irritante para os usuários, especialmente se a mídia for alta ou perturbadora.
- Certifique-se de que o conteúdo de mídia seja acessível a todos os usuários, incluindo aqueles com deficiência. Use legendas ou transcrições para conteúdo de vídeo e garanta que o conteúdo de áudio possa ser acessado com leitores de tela.
- Teste o conteúdo de mídia em diferentes navegadores e dispositivos para garantir que funcione e seja exibido corretamente. Considere o uso de design responsivo para garantir que o conteúdo de mídia seja exibido corretamente em diferentes tamanhos de tela.
- Use um CDN para fornecer conteúdo de mídia aos usuários mais rapidamente. Um CDN pode armazenar conteúdo de mídia em vários servidores ao redor do mundo, reduzindo a distância que o conteúdo precisa percorrer para chegar ao usuário.
