HTML - Incorporar Multimídia
Áudio e Vídeo
Elemento de Áudio HTML5
O elemento <audio> do HTML5 permite incorporar conteúdo de áudio em suas páginas web. Aqui está a sintaxe básica para usar o elemento <audio>:
Exemplo: Sintaxe Básica do Elemento de Áudio HTML5
<audio src="caminho/para/arquivo/audio.mp3" controls></audio>O atributo src especifica o caminho para o arquivo de áudio que você deseja incorporar. O atributo controls adiciona controles de áudio padrão, como reproduzir, pausar e volume, ao player de áudio.
Alguns atributos comumente usados para o elemento <audio> incluem:
| Atributo | Descrição |
|---|---|
autoplay |
Inicia automaticamente a reprodução do áudio quando a página carrega. |
loop |
Repete a reprodução do áudio indefinidamente. |
muted |
Silencia a saída de áudio por padrão. |
preload |
Especifica como o arquivo de áudio deve ser carregado (por exemplo, "auto", "metadata" ou "none"). |
O elemento <audio> suporta vários formatos de áudio, incluindo:
- MP3 (
.mp3) - WAV (
.wav) - OGG (
.ogg)
Exemplo: Incorporando um Arquivo de Áudio com o Elemento <audio>
<audio src="musica.mp3" controls autoplay loop>
Seu navegador não suporta o elemento de áudio.
</audio>Elemento de Vídeo HTML5
O elemento <video> do HTML5 permite incorporar conteúdo de vídeo em suas páginas web. Aqui está a sintaxe básica para usar o elemento <video>:
Exemplo: Sintaxe Básica do Elemento de Vídeo HTML5
<video src="caminho/para/arquivo/video.mp4" controls></video>O atributo src especifica o caminho para o arquivo de vídeo que você deseja incorporar. O atributo controls adiciona controles de vídeo padrão, como reproduzir, pausar e volume, ao player de vídeo.
Alguns atributos comumente usados para o elemento <video> incluem:
| Atributo | Descrição |
|---|---|
autoplay |
Inicia automaticamente a reprodução do vídeo quando a página carrega. |
loop |
Repete a reprodução do vídeo indefinidamente. |
muted |
Silencia a saída de áudio do vídeo por padrão. |
poster |
Especifica uma imagem a ser mostrada enquanto o vídeo está sendo baixado ou até que o usuário reproduza o vídeo. |
width e height |
Define a largura e a altura do player de vídeo. |
O elemento <video> suporta vários formatos de vídeo, incluindo:
- MP4 (
.mp4) - WebM (
.webm) - OGG (
.ogg)
Exemplo: Incorporando um Arquivo de Vídeo com o Elemento <video>
<video src="filme.mp4" controls width="640" height="360">
Seu navegador não suporta o elemento de vídeo.
</video>Incorporação de Mídia Externa
Incorporação de Vídeos do YouTube
Você pode incorporar vídeos do YouTube em suas páginas web usando o elemento <iframe>. Para obter o código de incorporação de um vídeo do YouTube:
- Acesse o vídeo do YouTube que deseja incorporar.
- Clique no botão "Compartilhar" abaixo do vídeo.
- Clique na opção "Incorporar" para obter o código de incorporação.
Exemplo: Código de Incorporação do YouTube
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Substitua VIDEO_ID pelo ID do vídeo do YouTube que deseja incorporar.
Você pode personalizar o player incorporado do YouTube alterando os parâmetros da URL no atributo src. Alguns parâmetros comuns incluem:
| Parâmetro | Descrição |
|---|---|
autoplay=1 |
Inicia a reprodução do vídeo automaticamente ao carregar a página |
loop=1 |
Repete a reprodução do vídeo indefinidamente |
controls=0 |
Oculta os controles padrão do vídeo |
Incorporação de Vídeos do Vimeo
A incorporação de vídeos do Vimeo é semelhante à incorporação de vídeos do YouTube. Você precisará usar o elemento <iframe> com o código de incorporação. Para obter o código de incorporação de um vídeo do Vimeo:
- Acesse o vídeo do Vimeo que deseja incorporar.
- Clique no botão "Compartilhar" abaixo do vídeo.
- Clique na aba "Incorporar" para obter o código de incorporação.
Exemplo: Código de Incorporação do Vimeo
<iframe src="https://player.vimeo.com/video/VIDEO_ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>Substitua VIDEO_ID pelo ID do vídeo do Vimeo que deseja incorporar.
Você pode personalizar o player incorporado do Vimeo alterando os parâmetros da URL no atributo src ou usando as opções no gerador de código de incorporação do Vimeo.
Incorporação de Áudio do SoundCloud
O SoundCloud fornece um código de incorporação <iframe> para incorporar faixas de áudio em suas páginas web. Para obter o código de incorporação de uma faixa do SoundCloud:
- Acesse a faixa do SoundCloud que deseja incorporar.
- Clique no botão "Compartilhar" abaixo da forma de onda da faixa.
- Clique na aba "Incorporar" para obter o código de incorporação.
Exemplo: Código de Incorporação do SoundCloud
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/TRACK_ID&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>Substitua TRACK_ID pelo ID da faixa do SoundCloud que deseja incorporar.
Você pode personalizar o player incorporado do SoundCloud alterando os parâmetros da URL no atributo src ou usando as opções no gerador de código de incorporação do SoundCloud.
Considerações de Acessibilidade
Ao adicionar conteúdo multimídia às suas páginas web, você deve pensar na acessibilidade para todos os usuários, incluindo aqueles com deficiências. Aqui estão algumas considerações importantes de acessibilidade para ter em mente:
Fornecendo Conteúdo Alternativo para Multimídia
Para tornar seu conteúdo multimídia acessível a usuários que podem não ser capazes de ver ou ouvir, você deve fornecer conteúdo alternativo. Isso pode incluir:
| Conteúdo Alternativo | Descrição |
|---|---|
| Transcrições de texto | Para conteúdo de áudio |
| Legendas | Para conteúdo de vídeo |
| Alternativas descritivas em texto | Para imagens e vídeos |
Você pode fornecer transcrições de texto e legendas usando o elemento <track> dentro dos elementos <audio> ou <video>.
Exemplo: Fornecendo Conteúdo Alternativo para Multimídia
<video src="video.mp4" controls>
<track src="captions.vtt" kind="captions" srclang="en" label="English Captions">
Seu navegador não suporta o elemento de vídeo.
</video>O elemento <track> é usado para especificar um arquivo (captions.vtt) que contém as legendas para o vídeo. O atributo kind é definido como "captions" para indicar que a faixa é para legendas, e o atributo srclang especifica o idioma das legendas.
Garantindo Acessibilidade por Teclado para Mídia Incorporada
Ao incorporar mídia de fontes externas como YouTube, Vimeo ou SoundCloud, você deve garantir que o player de mídia incorporado seja acessível por teclado. Isso significa que os usuários devem poder controlar o player usando comandos de teclado, como:
- Barra de espaço para reproduzir/pausar
- Teclas de seta para avançar ou retroceder
- Tecla TAB para mover entre os controles
A maioria dos players de mídia incorporados de fontes confiáveis é projetada com acessibilidade por teclado em mente. No entanto, você deve testar a acessibilidade por teclado da sua mídia incorporada para garantir que funcione como esperado.
Você também deve fornecer instruções claras ou rótulos para quaisquer controles de mídia personalizados que criar para garantir que todos os usuários, incluindo aqueles que usam tecnologias assistivas, possam entendê-los e usá-los.