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.