Тег <video> – Вставляет видеоролик на Web – страницу .
Тег <video> поддерживает все атрибуты , что и тег <audio> , и три дополнительных атрибута :
width – Ширина панели проигрывателя в пикселях , в которой будет выводится видеоролик . Если не указан атрибут , ширина панели будет равна ширине видео записанной в файле .
<video src="video.mp4" controls width="500">
<p>Ваш Web – браузер не поддерживает элемент video</p>
</video>height – Высота панели проигрывателя в пикселях , в которой будет выводится видеоролик . Если не указан атрибут , высота панели будет равна высоте видео записанной в файле .
poster – Интернет адрес графического файла , содержание которого выведено в панели проигрывателя после загрузки ролика . Если не указан , перед началом воспроизведения в панели проигрывателя будет выведен первый кадр ролика .
<video src="video.mp4" controls width="640" height="480"
poster="poster.jpg"></video>Форматы аудио или видео
Чтобы загрузить Web – браузер различные форматы аудио и видео файлов , нужно указать в тегах <audio> или <video> оба этих варианта , каждый из которых укажет один из вариантов помещенного на страницу файла .
<video controls>
<source src="video.mp4">
<source src="video.webm">
</video>Тег – <source> имеет атрибуты :
src – Интернет – адрес мультимедийного файла .
type – Обозначение формата мультимедийного файла в виде типа MIME .
MIME – типы для всех четырех форматов файлов перечислены в таблице . Если формат не указан , Web - браузер сам определит формат файла по его расширению .
Таблица MIME – типы мультимедийных файлов
| Формат файла | MIME – тип | |
|---|---|---|
| MP3 | Audio/mpeg | |
| MP3 | Audio/mpeg | |
| OGG | Audio/ogg | |
| MP4 | Video/mp4 | |
| WebM | Video/webm | |
Вставка видеоролика
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Вставка видеоролика</title>
<style type="text/css">
@media screen and (max-width: 767px) {
body {
max-width: 767px;
height: auto;
}
}
body { /* Стиль для всего документа */
font-size: 12pt; /* Размер шрифта */
font-family: "Verdana", sans-serif; /* Название шрифта */
}
h1 {
color: blue; /* Цвет шрифта */
}
video {
width: 75%;
height: 100%;
position: auto;
}
</style>
</head>
<body>
<h1>Вставка видеоролика</h1>
<video controls>
<source src="video/video.mp4">
<source src="video.webm">
</video>
</body>
</html>Вставка видеоролика
