HTML5. Урок #6. Элемент video и progress

Видео в HTML

Элемент video похож на элемент audio. Путь к исходному видеофайлу указывается с помощью атрибута source внутри элемента video или с использованием элементов source внутри элемента video:

<video controls>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   Видео не поддерживается Вашим браузером
</video>

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

Атрибуты <video>

Ещё одна общая особенность элементов audio и video - это одинаковые атрибуты: controls, autoplay и loop. В примере внизу видеоролик, дойдя до конца, будет воспроизведён снова:

<video controls autoplay loop>
   <source src="video.mp4" type="video/mp4">
   <source src="video.ogg" type="video/ogg">
   Видео не поддерживается Вашим браузером
</video>

На сегодняшний день элементом <video> поддерживаются три формата: MP4, WebM и OGG.

Полоса выполнения

Элемент <progress> используется для создания полосы выполнения на веб-странице. Его можно добавлять внутрь заголовков, абзацев или в любой раздел в теле страницы. Атрибуты элемента <progress> Value - указывает степень выполнения задачи Max - указывает на общий размер задачи Пример:

Статус: <progress min="0" max="100" value="35"></progress>

Результат:

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