УРОК 10. ВИДЕО И АУДИО

Видео крайне необходимый элемент сайта. Он напрямую влияет на его поведенческие характеристики, и как следствие на продвижение сайта. Чем больше пользователь находится на сайте, в том числе за счет просмотра видео, тем больше вероятность выйти в ТОП.

Пример использования видео на сайте ННГУ (www.unn.ru/eng)

Для видео используется тег <video>

Возьмите любое видео на компьютере, разместите в папке сайта и пропишите путь к нему. Например, src=»video.mp4″

После блока programms на нашей страницы укажем код

Блок player будет располагаться по всем ширине экрана, а блок  media, внутри которого будет видео, по центру.

В файле стилей пропишем

#player {

height:500px;

background: linear-gradient(50deg, #FFFFFF, #c4c4c4);

}

#media {

width:1024px;

height:500px;

margin:0 auto;

text-align:center;

}

video {

margin:30px auto;

width:600px;

height:450px;

}

width:600px и height:450px размеры видеоролика

Атрибуты элемента <video>

autoplay – автозапуск ролика;

loop — воспроизведение видео с начала, как только ролик достигает конца;

poster — указывает URL изображения, ко­торое будет отображаться на экране, пока видео не запущено

Для аудио используется тег <audio>, атрибуты котого аналогичны <video>