HTML тег <source>html5

HTML теги

Значение и применение

Тег <source>html5 позволяет указать несколько мультимедийных файлов в различном формате. Это необходимо, чтобы браузер смог выбрать подходящий / поддерживаемый формат для загрузки и дальнейшего воспроизведения аудио, либо видео.

В настоящее время существует 3 поддерживаемых формата видео (MP4, WebM, Ogg) и 3 формата аудио (MP3, Wav, Ogg):

БраузерMP4WebMOggMP3WavOgg
ChromeДаДаДа ДаДаДа
FirefoxДаДаДа ДаДаДа
OperaДаДаДа ДаДаДа
SafariДаНетНет ДаДаНет
IExplorerДаНетНет ДаНетНет
EdgeДаНетНет ДаДаНет

Поддержка браузерами

ТегChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
<source>html54.03.510.54.09.012.0

Атрибуты

АтрибутЗначениеОписание
mediahtml5media_queryУказывает, что файл адаптирован под определённые виды устройств.
srchtml5URLУказывает URL адрес медиа-файла.
typehtml5media_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>html5) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = "320" height = "240"), атрибут poster - указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).

Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

Использовали тег <source>html5, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы браузера необходимо указывать в тегах <source>html5 атрибут type (MIME-типы для видео):

Формат MIME-типы
MP4video/mp4
Oggvideo/ogg
WebMvideo/webm

Благодаря тегу <track>html5 добавили субтитры к видео:

Результат нашего примера:

Добавление видео с субтитрами.
Добавление видео с субтитрами.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги