Атрибут poster тега <video> — заставка до запуску
Атрибут poster вказує адресу картинки, яка буде відображатися, поки відео недоступне або НЕ запущине. Саме зображення може бути в будь-якому доступному форматі: GIF, PNG, JPEG.
Якщо атрибут poster не вказано, браузер постарається відобразити перший кадр відео.
автор: с3с
Загальний опис
автор: NagarD
- Порада
-
Використовуйте зображення яке відповідає тематиці відео.
автор: с3с
Синтаксис
<video poster="URL">Атрибут poster може отримувати єдине значення:
-
URL -
Задає URL-адресу файла зображення. Можливі значення:
- Абсолютний URL - вказує на інший сайт (наприклад, href="http://www.example.com/poster.jpg).
- Відносний URL - вказує на файл в межах веб-сайту (наприклад, href="poster.jpg").
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 3.6 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<div class="block1" >
<p> З використання атрибуту <code> poster </code> </p>
<video width="400" height="200" controls preload="metadata" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>
</div>
<div class="block1" >
<p> Без використання атрибуту <code> poster</code> </p>
<video width="400" height="200" controls preload="metadata">
Ваш браузер не відтворює відео.
</video>
</div>CSS
.block1{
float:left;
padding:10px;
border:2px solid black;
}Чотири відео без жодного відеофайлу — видно самі постери: без розмірів коробка бере розмір постера (400×100), зі зламаним постером лишається порожні типові 300×150, width="200" дораховує висоту за пропорціями, а object-fit: cover вписує широкий постер у квадрат.
HTML
<p>1. Без width і height — коробка стала рівно 400×100 за постером:</p>
<video poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='100'%3E%3Crect%20width='400'%20height='100'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='200'%20cy='50'%20r='26'%20fill='%23ffffff'/%3E%3C/svg%3E"></video>
<p>2. Постер зі зламаною адресою — типові 300×150 і порожньо всередині:</p>
<video poster="zlamana-adresa.png"></video>
<p>3. width="200" — висоту 50 дораховано за пропорціями постера:</p>
<video width="200" poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='100'%3E%3Crect%20width='400'%20height='100'%20fill='%2372b043'/%3E%3Ccircle%20cx='200'%20cy='50'%20r='26'%20fill='%23ffffff'/%3E%3C/svg%3E"></video>
<p>4. Квадратна коробка 200×200 і той самий широкий постер: ліворуч object-fit: contain
(типове — з полями), праворуч cover (обрізано по коробці):</p>
<video class="square contain" poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='100'%3E%3Crect%20width='400'%20height='100'%20fill='%23f2b134'/%3E%3Ccircle%20cx='200'%20cy='50'%20r='26'%20fill='%23ffffff'/%3E%3C/svg%3E"></video>
<video class="square cover" poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='100'%3E%3Crect%20width='400'%20height='100'%20fill='%23f2b134'/%3E%3Ccircle%20cx='200'%20cy='50'%20r='26'%20fill='%23ffffff'/%3E%3C/svg%3E"></video>CSS
p {
margin: 18px 0 6px;
max-width: 540px;
}
video {
display: inline-block;
outline: 2px dashed #d64545;
outline-offset: 2px;
background: #eef1f5;
}
.square {
width: 200px;
height: 200px;
margin-right: 14px;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}Різниця між HTML 4.01 та HTML5
Атрибут poster з'явився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!