Перейти к содержанию

Добавление видеоконтента на страницу

<video>

Элемент <video> обладает целым набором атрибутов, позволяющих управлять воспроизведением видеоролика.

src

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

poster

Данный атрибут позволяет установить изображение, показываемое в процессе загрузки видеоконтента и до момента, пока посетитель не начнет воспроизведение ролика.

width, height

Эти атрибуты определяют размеры окна проигрывателя в пикселах.

controls

Этот атрибут используется, если требуется, чтобы браузер предоставил собственные элементы управления воспроизведением.

autoplay

Этот атрибут используется, если требуется, чтобы видеоролик автоматически начинал воспроизводиться после загрузки.

loop

Этот атрибут используется, если требуется, чтобы проигрыватель автоматически повторял воспроизведение видеоролика.

auto

Браузер должен загрузить видеоролик по окончании загрузки страницы

Код
<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML5: добавление видео на страницу
        </title>
    </head>
    <body>
        <video src="video/puppy.mp4"
        poster="images/puppy.jpg"
        width="400" height="300"
        preload
        controls
        loop>
        <p>Играющие щенки</p>
        </video>
    </body>
</html>
Результат

В языке HTML5 не обязательно присваивать значения атрибутам controls, autoplay и loop, используемым с элементом <video>. Эти атрибуты подобны переключателям. Если атрибут указан, значит, данная функция считается включенной, если не указан - соответственно, отключенной.

preloaded

Данный атрибут дает браузеру инструкцию, что следует сделать при загрузке страницы. Он может принимать одно из следующих трех значений.

none

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

metadata

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