Сегодня мы рассмотрим технику применения HTML5 tag VIDEO, для встраивания видео в страницу

Раньше (да и сейчас частенько) видео в страницы встраиваелось при помощи Flash проигрывателей. Это не очень удобно — Flash долго загружается (зачастую), плохо работает на мобильных устройствах, нагружает процессор (заметно на слабых компьютерах). В общем одни проблемы. Другое дело HTML5 tag VIDEO. Он использует встроенные в ОС кодеки для проигрывания видео, и соответственно более граммотно работает с процессором и оперативной памятью (работает на большинстве устройств, не нагружает сильно процессор).

Какой синтаксис у HTML5 tag VIDEO?

Всё просто до невероятности. Чтобы встроить видео в страницу при помощи HTML5 tag VIDEO, нужно просто написать:


Этому тэгу video можно прописать дополнительные CSS стили (просто в CSS):

video{
width: 100px;
height: 50px;
}

Тэг VIDEO принимает такие атрибуты:

autoplay — если значение атрибута true, то видео начнет проигрываться сразу после загрузки страницы
controls — если значение атрибута true, то на видео будут добавлены стандартные кнопки управления воспроизведением
height — очевидно высота фрейма с видео
loop — если значение атрибута true, то видео будет проигрываться по кругу
poster — этот атрибут может содержать адрес картинки, которая будет отображаться пока видео не воспроизводится
preload — если значение атрибута true, то видео начнет загружаться вместе с загрузкой страницы (не дожидаясь пока пользователь нажмет на PLAY).
src — этот атрибут должен содержать адрес видео-файла для воспроизведения
width — очевидно ширина фрейма с видео.


Именно с помощью такого тэга видео и встраиваются видео-ролики на сайте сериала Чернобыль http://chernobyltv.net/