Атрибут width тега <video> — ширина вікна відтворення
Атрибут width задає ширину області для відтворення відеоролика. Саме відео змінює свої розміри в більшу або меншу сторону, щоб вписатися в зазначену ширину, але його пропорції при цьому не спотворюються.
Загальний опис
автор: NagarD
- Порада
-
Завжди вказуйте висоту і ширину для відео. Якщо висота і ширина встановлюються, простір, необхідний для відео, резервується при завантаженні сторінки. Без цих атрибутів, браузер не знає розмір відео і не може зарезервувати відповідний простір для нього. Ефект буде такий, що макет сторінки буде змінюватися під час завантаження (в той час як відео завантажується).
автор: с3с - Порада
-
Не масштабуйте відео за допомогою атрибутів висоти і ширини! Зменшення роздільної здатності великого відео з змушує користувача завантажити вихідне відео (навіть якщо воно виглядає маленьким на сторінці). Правильний спосіб масштабування відео це за допомогою спеціального ПЗ.
автор: с3с
Синтаксис
<video width="pixels" > ... </video>Атрибут width може отримувати єдине значення:
-
pixels -
Ширина відео в пікселях (тобто width="130").
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
Той самий програвач у чотирьох варіантах усередині вузької колонки завширшки 240 пікселів. Перший заданий атрибутом width="640" і чесно вилазить за межі колонки; другий має ще й max-width: 100% без height: auto — вписався, але пропорції зламано; третій зроблено правильно; четвертий показує, що відсоток в атрибуті теж працює, хоч валідатор його й не любить.
HTML
<p class="head bad">1. width="640" — жорсткі 640 пікселів, колонці байдуже</p>
<div class="kolonka">
<video 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='%23d64545'/%3E%3Ccircle%20cx='320'%20cy='180'%20r='70'%20fill='%23ffffff'/%3E%3C/svg%3E"></video>
</div>
<p class="head bad">2. max-width: 100% без height: auto — ширина вписалась, висота ні</p>
<div class="kolonka">
<video class="pivshlyahu" 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='%23e0a800'/%3E%3Ccircle%20cx='320'%20cy='180'%20r='70'%20fill='%23ffffff'/%3E%3C/svg%3E"></video>
</div>
<p class="head good">3. Правильно: атрибути плюс max-width: 100% і height: auto</p>
<div class="kolonka">
<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="head">4. width="50%" — Firefox рахує від колонки, валідатор бачить помилку</p>
<div class="kolonka">
<video width="50%" 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>
</div>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;
}
.kolonka {
width: 240px;
padding: 6px;
border: 2px solid #b9c6d8;
border-radius: 6px;
background: #f6f9ff;
}
video {
background: #eef3fb;
display: block;
}
.pivshlyahu {
max-width: 100%;
}
.resp {
max-width: 100%;
height: auto;
}HTML
<p> Приклад використання атрибуту <code> width </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> width </code> </p>
<video id="image" width="100" height="260" controls preload="metadata" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' 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> width </code> </p>
<video height="260" controls preload="metadata" poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' 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;
padding:10px;
border:2px solid black;
}JS
function f() {
var width = document.getElementById("range").value;
var image = document.getElementById("image");
image.setAttribute("width", width);
text.innerHTML = "Поточна ширина video " + width;
}
//# sourceURL=pen.jsРізниця між HTML 4.01 та HTML5
Атрибут width з'явився тільки у HTML5.
Коментарі
Коментарів ще немає — будьте першим!