HTML тег <source>
HTML теги
Значение и применение
Тег <source> позволяет указать несколько мультимедийных файлов в различном формате. Это необходимо, чтобы браузер смог выбрать подходящий / поддерживаемый формат для загрузки и дальнейшего воспроизведения аудио, либо видео.
В настоящее время существует 3 поддерживаемых формата видео (MP4, WebM, Ogg) и 3 формата аудио (MP3, Wav, Ogg):
| Браузер | MP4 | WebM | Ogg | MP3 | Wav | Ogg |
|---|---|---|---|---|---|---|
| Chrome | Да | Да | Да | Да | Да | Да |
| Firefox | Да | Да | Да | Да | Да | Да |
| Opera | Да | Да | Да | Да | Да | Да |
| Safari | Да | Нет | Нет | Да | Да | Нет |
| IExplorer | Да | Нет | Нет | Да | Нет | Нет |
| Edge | Да | Нет | Нет | Да | Да | Нет |
Поддержка браузерами
| Тег |  Chrome |  Firefox |  Opera |  Safari |  IExplorer |  Edge |
|---|---|---|---|---|---|---|
| <source> | 4.0 | 3.5 | 10.5 | 4.0 | 9.0 | 12.0 |
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| media | media_query | Указывает, что файл адаптирован под определённые виды устройств. |
| src | URL | Указывает URL адрес медиа-файла. |
| type | media_type | Указывает MIME-типы для медиа. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <source></title> </head> <body> <h1>Видео в HTML5</h1> <video width = "320" height = "240" poster = "10.jpg" controls> <source src = "123.mp4" type = "video/mp4"> <source src = "123.ogg" type = "video/ogg"> <track src = "sub_en.vtt" kind = "subtitles" srclang = "en" label = "English"> <track src = "sub_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russian" default> Ваш браузер не поддерживает видео тег. </video> </body> </html>
В этом примере мы:
Добавили на страницу видео (тег <video>) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = "320" height = "240"), атрибут poster - указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).
Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
Использовали тег <source>, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы браузера необходимо указывать в тегах <source> атрибут type (MIME-типы для видео):
| Формат | MIME-типы |
|---|---|
| MP4 | video/mp4 |
| Ogg | video/ogg |
| WebM | video/webm |
Благодаря тегу <track> добавили субтитры к видео:
- Добавили путь к файлу атрибутом src.
- Установили тип дорожки - субтитры kind = "subtitles" (данный параметр устанавливается по умолчанию, также доступны навигационные параметры, метаданные и параметры для людей с ограниченными возможностями).
- Установили язык дорожки srclang = "ru".
- Отобразили названия двух дорожек label = "English", label = "Russian".
- Выбрали дорожку по умолчанию атрибутом default.
Результат нашего примера:
Значение CSS по умолчанию
Нет.Поддержка глобальных атрибутов
Элемент поддерживает "глобальные атрибуты".
Атрибуты событий
Элемент поддерживает "атрибуты событий".
HTML теги