Alterando a origem de uma tag de vídeo HTML5: uma solução abrangente

A criação de um player de vídeo universal requer resolver o problema de alteração dinâmica da fonte do vídeo. Isso permite que os usuários alternem entre os vídeos em uma lista de reprodução. Embora as abordagens anteriores que usam várias tags tenham enfrentado limitações, este artigo apresenta um método confiável usando um único atributo .

Identificando o tipo de arquivo usando canPlayType():

Para determinar o tipo de arquivo apropriado para o vídeo, podemos utilizar a função canPlayType(). Esta função retorna uma string indicando o nível de suporte do navegador para um determinado tipo de mídia. Por exemplo:

var canPlayMP4 = video.canPlayType('video/mp4');
var canPlayWebM = video.canPlayType('video/webm');

Com base nos resultados de canPlayType(), podemos definir dinamicamente o atributo src da tag

Implementação usando Vanilla JavaScript:

Aqui está um trecho de código demonstrando como alterar a fonte do vídeo usando Vanilla JavaScript:

var video = document.getElementById('video');

// Create a new source element
var source = document.createElement('source');

// Set the source attributes dynamically based on browser support
if (canPlayMP4) {
  source.setAttribute('src', 'video.mp4');
  source.setAttribute('type', 'video/mp4');
} else if (canPlayWebM) {
  source.setAttribute('src', 'video.webm');
  source.setAttribute('type', 'video/webm');
}

// Append the source to the video element
video.appendChild(source);

// Play the video
video.play();

Essa abordagem permite a troca dinâmica de fonte sem as desvantagens de usar várias tags . Também garante que o vídeo será reproduzido no formato mais adequado suportado pelo navegador.