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

Описание

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

Пример использования (ограниченная полезность):

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

Ограничения применения:

  • Элемент <source> не поддерживает фокусировку
  • Не участвует в визуальном отображении контента
  • Не может быть целевым элементом для CSS-стилей
  • Редко требует прямого доступа через JavaScript

Потенциальные сценарии использования:

Сценарий Пример Рекомендация
Доступ через JavaScript document.getElementById('video-source') Лучше обращаться к родительскому элементу
Динамическая замена источника source.src = 'new-video.mp4' Использовать data-атрибуты вместо id

Рекомендуемые альтернативы:

<video id="main-video" controls> <source src="video.mp4" type="video/mp4" data-quality="hd"> <source src="video.webm" type="video/webm" data-quality="hd"> </video> <script> // Предпочтительный способ доступа const video = document.getElementById('main-video'); const hdSources = video.querySelectorAll('source[data-quality="hd"]'); </script>

Лучшие практики:

  1. Избегайте назначения id элементам <source>
  2. Для выборки используйте родительский элемент и data-атрибуты
  3. Для динамической загрузки создавайте элементы без id
  4. Уникальные идентификаторы применяйте к интерактивным элементам

Единственный оправданный сценарий:

<script> // Крайне редкий случай, когда может потребоваться id function trackSourceUsage() { const source = document.getElementById('tracked-source'); // Логика отслеживания... } </script> <video controls> <source id="tracked-source" src="video.mp4" type="video/mp4"> </video>

Важно:

Назначение id элементам <source> почти никогда не является хорошей практикой. Рассмотрите альтернативные подходы к архитектуре вашего кода.