Cambiar la fuente de una etiqueta de video HTML5: una solución integral

Crear un reproductor de video universal requiere abordar el problema del cambio dinámico de la fuente del vídeo. Esto permite a los usuarios cambiar entre videos en una lista de reproducción. Si bien los enfoques anteriores que utilizan múltiples etiquetas han enfrentado limitaciones, este artículo presenta un método confiable que utiliza un único atributo .

Identificación del tipo de archivo usando canPlayType():

Para determinar el tipo de archivo apropiado para el video, podemos utilizar la función canPlayType(). Esta función devuelve una cadena que indica el nivel de soporte del navegador para un tipo de medio determinado. Por ejemplo:

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

Según los resultados de canPlayType(), podemos establecer dinámicamente el atributo src de la etiqueta

Implementación usando JavaScript básico:

Aquí hay un fragmento de código que demuestra cómo cambiar la fuente del video usando JavaScript básico:

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();

Este enfoque permite el cambio dinámico de fuente sin los inconvenientes de usar múltiples etiquetas . También garantiza que el vídeo se reproducirá en el formato más adecuado admitido por el navegador.