Несколько источников видеоконтента

`<source>`

Для указания расположения видеофайла вы можете воспользоваться элементом <source>, помещаемым внутрь элемента <video>. (Данный элемент призван заменить атрибут src тега <video>.)

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

`src`

Данный атрибут служит для указания пути к видеофайлу.

`type`

Используйте этот атрибут для указания формата видеофайла. В противном случае браузер загрузит часть видеофайла, чтобы проверить возможность воспроизведения, что займет некоторое время и повлечет лишний расход трафика.

`codecs`

В атрибуте type необходимо указать кодек для конвертирования видео. Обратите внимание на использование двойных и одинарных кавычек при указании атрибута type.

Пример

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML5: несколько источников видео
        </title>
    </head>
    <body>
        <video poster="images/puppy.jpg" width="400"
        height="320" preload controls loop>

        <source src="video/puppy.mp4"
        type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>

        <source src="video/puppy.webm" 
        type='video/webm; codecs="vp8, vorbis"'/>

        <p>Играющие щенки</p>
        </video>
    </body>
</html>

Если браузер не поддерживает элемент <video> или формат используемого видеофайла, то на экран будет выведена информация, помещенная между открывающим <video> и закрывающим тегами.

ПРИМЕЧАНИЕ

На этой странице размещено несколько ссылок на инструменты, позволяющие конвертировать видео и аудиофайлы в требуемый формат.