Atributos de elementos multimídia

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:

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

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

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

    
      <video id="myVideo" src="videofile.mp4" controls></video>
      <button onclick="playVideo()">Play</button>
      <button onclick="pauseVideo()">Pause</button>
      <button onclick="stopVideo()">Stop</button>
    
  

    
      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:

    
      <video id="myVideo" src="videofile.mp4" controls></video>
    
  

    
      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

Опрос

Multimídia em HTML,  6 уровень,  5 лекция

недоступен

Multimídia em HTML

Multimídia em HTML

Открыть