Атрибут src тега <video>
Описание
Атрибут src указывает URL-адрес видеофайла, который должен быть воспроизведен элементом <video>. Это основной атрибут для указания источника видео.
<video src="video.mp4" controls>
Ваш браузер не поддерживает видео тег.
</video>
Особенности работы:
- Поддерживает различные форматы видео (MP4, WebM, Ogg)
- Может использоваться как альтернатива элементам
<source> - Требует указания MIME-типа для корректного воспроизведения
- Работает с относительными и абсолютными путями
Поддерживаемые форматы:
| Формат | MIME-тип | Поддержка браузерами |
|---|---|---|
| MP4 (H.264) | video/mp4 | Все современные браузеры |
| WebM (VP9) | video/webm | Chrome, Firefox, Edge |
| Ogg Theora | video/ogg | Firefox, Chrome, Opera |
Рекомендации по использованию:
- Для кросс-браузерной поддержки используйте с элементами
<source> - Указывайте MIME-тип для корректного определения формата
- Оптимизируйте видео для веба (сжатие, битрейт)
- Используйте CDN для больших видеофайлов
Пример с несколькими источниками:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Ваш браузер не поддерживает видео тег.
</video>
Ограничения:
- Разные браузеры поддерживают разные кодеки
- Большие файлы могут долго загружаться
- Требует правильной настройки сервера для потоковой передачи
Программное изменение источника:
<video id="myVideo" controls></video>
<script>
const video = document.getElementById('myVideo');
video.src = 'new-video.mp4';
video.load(); // Перезагружаем видео
</script>
Важно: При работе с видео:
- Всегда указывайте fallback-контент внутри тега
- Проверяйте CORS-политики для кросс-доменных запросов
- Оптимизируйте видео для веб-воспроизведения
Оптимальная практика:
<video controls poster="preview.jpg" preload="metadata">
<source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
<source src="video.vp9.webm" type="video/webm; codecs=vp9">
<source src="video.h264.mp4" type="video/mp4">
<p>Ваш браузер не поддерживает HTML5 видео.</p>
</video>