Изменение источника видеотега HTML5: комплексное решение

Для создания универсального видеоплеера необходимо решить проблему динамического изменения источника видео. Это позволяет пользователям переключаться между видео в плейлисте. Хотя предыдущие подходы с использованием нескольких тегов столкнулись с ограничениями, в этой статье представлен надежный метод с использованием одного атрибута .

Определение типа файла с помощью canPlayType():

Чтобы определить подходящий тип файла для видео, мы можем использовать функцию canPlayType(). Эта функция возвращает строку, указывающую уровень поддержки браузером данного типа мультимедиа. Например:

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

На основе результатов canPlayType() мы можем динамически установить атрибут src тега

Реализация с использованием Vanilla JavaScript:

Вот фрагмент кода, демонстрирующий, как измените источник видео с помощью стандартного 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();

Этот подход позволяет динамически переключать источники без недостатков использования нескольких тегов . Это также гарантирует, что видео будет воспроизводиться в наиболее подходящем формате, поддерживаемом браузером.