CodeGym/Cursos/Frontend SELF PT/Atributos de elementos multimídia

Atributos de elementos multimídia

Disponível

5.1 Atributos Adicionais

Elementos multimídia do HTML5, como <audio> e <video>, oferecem muitos atributos para controlar a reprodução do conteúdo multimídia. Entender esses atributos permite criar páginas web mais interativas e amigáveis que podem se adaptar às diferentes necessidades dos usuários. Agora vamos examinar detalhadamente os atributos adicionais disponíveis para os elementos <audio> e <video>.

Atributo crossorigin

O atributo crossorigin especifica como o navegador deve lidar com solicitações para arquivos multimídia localizados em outros domínios. Este atributo pode ter dois valores:

  • anonymous: a solicitação é feita sem incluir credenciais (cookies, cabeçalhos de autorização, etc.)
  • use-credentials: a solicitação é feita incluindo credenciais

Exemplo:

HTML
<audio src="https://example.com/audiofile.mp3" controls crossorigin="anonymous"></audio>
<video src="https://example.com/videofile.mp4" controls crossorigin="use-credentials" width="800" height="450"></video>

Atributos de fontes <source>

As tags <source> são usadas dentro dos elementos <audio> e <video> para especificar várias fontes de conteúdo multimídia. Isso ajuda a garantir a compatibilidade entre navegadores, já que navegadores diferentes podem suportar formatos diferentes.

Exemplo:

HTML
<video controls width="600">
  <source src="videofile.mp4" type="video/mp4">
  <source src="videofile.webm" type="video/webm">
  <source src="videofile.ogv" type="video/ogg">
  Seu navegador não suporta o elemento de vídeo.
</video>

Atributos e propriedades para legendas e faixas de texto

O HTML5 oferece a possibilidade de adicionar legendas, faixas de texto e descrições usando a tag <track>. Este elemento suporta vários tipos de faixas de texto, como legendas, descrições e capítulos.

Exemplo:

HTML
<video controls width="600">
  <source src="videofile.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
  Seu navegador não suporta o elemento de vídeo.
</video>

5.2 Controle de elementos multimídia com JavaScript

Os elementos <audio> e <video> oferecem uma API para controle da reprodução com JavaScript. Isso permite criar controles personalizados e implementar cenários de reprodução complexos.

Exemplo:

HTML
<video id="myVideo" src="videofile.mp4" controls></video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<button onclick="stopVideo()">Stop</button>
JavaScript
const video = document.getElementById("myVideo");

function playVideo() {
  video.play();
}

function pauseVideo() {
  video.pause();
}

function stopVideo() {
  video.pause();
  video.currentTime = 0;
}

Neste exemplo, os botões permitem reproduzir, pausar e parar o vídeo com JavaScript.

5.3 Eventos de elementos multimídia

Os elementos <audio> e <video> suportam muitos eventos que permitem monitorar e reagir a mudanças no estado da reprodução.

Principais eventos:

  • play: ocorre quando a reprodução começa
  • pause: ocorre quando a reprodução é pausada
  • ended: ocorre quando a reprodução termina
  • timeupdate: ocorre periodicamente conforme o tempo atual de reprodução muda

Exemplo de uso de eventos:

HTML
<video id="myVideo" src="videofile.mp4" controls></video>
JavaScript
const video = document.getElementById("myVideo");

video.addEventListener('play', function() {
  console.log('Vídeo começou a tocar');
});

video.addEventListener('pause', function() {
  console.log('Vídeo pausado');
});

video.addEventListener('ended', function() {
  console.log('Vídeo terminou');
});

video.addEventListener('timeupdate', function() {
  console.log('Tempo atual: ' + video.currentTime);
});

Este código demonstra como monitorar os principais eventos de um elemento multimídia.

1
Tarefa
Frontend SELF PT,  nível 6lição 5
Bloqueado
Fontes de mídia
Fontes de mídia
1
Tarefa
Frontend SELF PT,  nível 6lição 5
Bloqueado
Legendas para vídeo
Legendas para vídeo
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário