Работа с видео в HTML5.

Всем привет! Сегодня мы подробно поговорим о такой мультимедийной возможности HTML5 как воспроизведение видео.

Для того, чтобы вставить видео на сайт, используется тег video.

У данного тега есть атрибут src, в который мы должны прописать путь до нашего видеоролика.

Если вы сейчас откроете страницу в браузере, то увидите картинку(постер), однако, больше ничего не будет. Вы никак не сможете взаимодействовать с видео.(Google Chrome).

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

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

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

Есть еще такой интересный атрибут как preload. Как понятно из названия, он отвечает за предзагрузку видео. У него 3 значения:

• none - означает, что никакой предзагрузки не будет. Не будет вообще никакой информации, даже такой, как длительность, уровень громкости и т.д.
• metadata - это значение, наоборот, покажет нам ту информацию, которую не покажет значение none
• auto - подгружает видео сразу после загрузки страницы, чтобы человек мог его сразу запустить и не ждать, пока оно загрузится. Что-то вроде полоски на YouTube, но тут она не отображается

Понятно, что если у вас стоят сразу 2 атрибута - preload и autoplay, то весь смысл атрибута preload пропадает.

Конечно же, у данного тега есть такие атрибуты как width и height, которые отвечают за ширину и высоту видео.

При помощи атрибута poster вы можете выставить свою картинку, которая будет показываться до того, как вы воспроизведете видео.

Для того, чтобы выключить звук у видео, существует атрибут muted.

Также, в html5 video есть возможность указать промежуток времени, с которого начнется просмотр и когда он закончится. Для этого достаточно указать #t= после имени видеофайла и указать время начала и конца через запятую.

В примере выше мы указали, что видео должно начаться с 3 секунды и закончиться на 5.

Если вы хотите указать только время, с которого должен начаться просмотр, то можно указать только одно значение

В примере выше видео будет начинаться с 3 секунды и идти до конца.

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

В примере выше видео начнется с самого начала и будет идти до 5-ой секунды.

Возможность встраивать видео в html появилась недавно и понятно, что старые браузеры не поддерживают данной возможности. Чтобы это исправить, мы можем написать им какой-то текст между тегами <video></video>

Или вы можете встроить сюда какой-то другой плеер, например, на flash или javascript, и тогда видео смогут просмотреть даже пользователи старых браузеров.

Каждый современный браузер поддерживает свой формат видео, а старые браузеры имеют поддержку еще хуже. Чтобы поддерживать несколько форматов видео, существует тег source.

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

У тега source есть атрибут type, в котором мы указываем MIME тип и кодеки.

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

Итак, на этом все. Это все, что можно и нужно знать про HTML5 Video. Спасибо за внимание и удачи!