Атрибут height тега <video> — висота вікна відтворення
автор: с3с
Загальний опис
автор: NagarD
- Порада
-
Завжди вказуйте висоту і ширину для відео. Якщо висота і ширина встановлюються, простір, необхідний для відео, резервується при завантаженні сторінки. Без цих атрибутів, браузер не знає розмір відео і не може зарезервувати відповідний простір для нього. Ефект буде такий, що макет сторінки буде змінюватися під час завантаження (в той час як відео завантажується).
автор: с3с - Порада
-
Не масштабуйте відео за допомогою атрибутів висоти і ширини! Зменшення роздільної здатності великого відео з змушує користувача завантажити вихідне відео (навіть якщо воно виглядає маленьким на сторінці). Правильний спосіб масштабування відео це за допомогою спеціального ПЗ.
автор: с3с
Синтаксис
<video height="pixels|percent">Атрибут height може отримувати 2 значень:
-
pixels -
Висота відео в пікселях (тобто height="100").
автор: с3с -
percent
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
Сім програвачів підряд; там, де потрібні пропорції, замість відео стоїть постер 640×360 — він задає рамці те саме співвідношення, що й справжній файл, а перший і пʼятий лишились порожніми навмисно. Видно, що порожнє video — це 300×150, що сама лише висота дає ширину зі співвідношення 2:1, що рамка 320×500 не розтягує кадр, а додає порожні смуги, і що хибне значення тихо повертає типовий розмір. Останній рядок — сучасний рецепт: атрибути плюс max-width і height: auto.
HTML
<p class="head">1. Без розмірів — 300×150, і це не пропорції вашого відео</p>
<video></video>
<p class="head">2. Тільки height="180" — ширина 360, бо браузер рахує з 2:1</p>
<video height="180"></video>
<p class="head">3. Той самий height="180", але з постером 640×360 — ширина 320</p>
<video height="180" poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='640'%20height='360'%3E%3Crect%20width='640'%20height='360'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='320'%20cy='180'%20r='70'%20fill='%23ffffff'/%3E%3C/svg%3E"></video>
<p class="head">4. width="320" height="500" — рамка витяглась, кадр ні</p>
<video width="320" height="500" poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='640'%20height='360'%3E%3Crect%20width='640'%20height='360'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='320'%20cy='180'%20r='70'%20fill='%23ffffff'/%3E%3C/svg%3E"></video>
<p class="head bad">5. height="abc" — рамка мовчки стала така сама, як у першого: 300×150</p>
<video height="abc"></video>
<p class="head bad">6. height="180" плюс height: 60px у стилях — виграє CSS</p>
<video class="css" height="180" poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='640'%20height='360'%3E%3Crect%20width='640'%20height='360'%20fill='%23d64545'/%3E%3C/svg%3E"></video>
<p class="head good">7. Так пишуть сьогодні: атрибути для пропорцій, розмір — у стилях</p>
<div class="vuzko">
<video class="resp" width="640" height="360" poster="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='640'%20height='360'%3E%3Crect%20width='640'%20height='360'%20fill='%233a9a4f'/%3E%3Ccircle%20cx='320'%20cy='180'%20r='70'%20fill='%23ffffff'/%3E%3C/svg%3E"></video>
</div>
<p class="note">Сьомий програвач вписався у вузьку колонку й не виліз за її край:
так поводиться пара max-width: 100% і height: auto.</p>CSS
.head {
margin: 20px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
.bad {
color: #c0392b;
}
.good {
color: #1b5e20;
}
video {
background: #eef3fb;
outline: 2px dashed #b9c6d8;
outline-offset: 2px;
}
.css {
height: 60px;
}
.vuzko {
width: 220px;
padding: 6px;
border: 2px solid #3a9a4f;
border-radius: 6px;
background: #f3fbf4;
}
.resp {
max-width: 100%;
height: auto;
}
.note {
max-width: 460px;
margin-top: 10px;
color: #5a6472;
font-size: .9em;
}HTML
<p> Приклад використання атрибуту <code> height </code> </p>
<p id="text"> Поточна ширина video: 100 </p>
<input type="range" id="range" min="0" max="500" step="1" name="range">
<input type="button" value="Встановити ширину" onclick="f()">
<hr>
<div class="block1" >
<p> З використанням атрибуту <code> height </code> </p>
<video id="image" width="100" height="100" controls preload="metadata" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>
</div>
<div class="block1" >
<p> Без використання атрибуту <code> height </code> </p>
<video width="100" controls preload="metadata" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>
</div>CSS
.block1{
float:left;
width:40%;
border:2px solid black;
}JS
function f() {
var height = document.getElementById("range").value;
var image = document.getElementById("image");
image.setAttribute("height", height);
text.innerHTML = "Поточна ширина video " + height;
}
//# sourceURL=pen.jsРізниця між HTML 4.01 та HTML5
Атрибут height з'явився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!