Атрибут src тега <source>

Описание

Атрибут src указывает путь к медиафайлу для элемента <source>, который используется внутри <audio> или <video> для предоставления альтернативных источников мультимедиа.

Пример использования:

<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Ваш браузер не поддерживает видео. </video>

Основные характеристики:

  • Обязательный атрибут для элемента <source>
  • Может содержать относительные или абсолютные URL-адреса
  • Работает в паре с атрибутом type для указания MIME-типа
  • Браузер выбирает первый поддерживаемый источник

Поддерживаемые форматы:

Тип Форматы MIME-тип
Аудио MP3, WAV, OGG audio/mpeg, audio/wav, audio/ogg
Видео MP4, WebM, OGG video/mp4, video/webm, video/ogg

Рекомендации:

  1. Всегда указывайте атрибут type для оптимального выбора браузером
  2. Предоставляйте несколько форматов для кросс-браузерной совместимости
  3. Используйте относительные пути для локальных файлов
  4. Для CDN используйте абсолютные URL с HTTPS
  5. Оптимизируйте медиафайлы для веба

Пример с аудио:

<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Ваш браузер не поддерживает аудио. </audio>

Динамическая загрузка источника:

<video id="my-video" controls></video> <script> const video = document.getElementById('my-video'); const source = document.createElement('source'); source.src = 'dynamic-video.webm'; source.type = 'video/webm'; video.appendChild(source); video.load(); </script>

Ошибки и отладка:

  • Проверяйте правильность пути к файлу
  • Убедитесь, что MIME-типы настроены на сервере
  • Для больших файлов используйте предзагрузку
  • Тестируйте на разных устройствах и браузерах

Доступность:

<video controls aria-label="Демонстрационное видео"> <source src="video.mp4" type="video/mp4"> <track src="subtitles.vtt" kind="subtitles" srclang="ru" label="Русские субтитры"> </video>