Атрибут controls тега <video> — панель керування
Атрибут controls — логічний атрибут.
Він вказує, що панель керування відео повинна бути відображена.
Управління відео повинно включати в себе наступні функції:
- Грати.
- Пауза.
- Пошук.
- Гучність.
- Режим повного екрану.
- Титри/субтитри (якщо є).
- Трек (якщо є).
Набір органів керування залежить від браузера.
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<video controls>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 3 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 3 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<div class="block1" >
<p> З використанням атрибуту <code> controls</code> </p>
<video width="320" height="180" 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>controls </code> </p>
<video width="320" height="180" 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;
}Три однакові елементи <video>: з controls, з controls="false" і без атрибута; у перших двох панель керування однакова.
HTML
<h3>controls — панель є</h3>
<video controls></video>
<h3>controls="false" — панель однаково є</h3>
<video controls="false"></video>
<h3>атрибута немає — панелі немає</h3>
<video></video>CSS
h3 { font-size: 15px; margin: 12px 0 6px; }
video {
display: block;
width: 300px;
height: 54px;
background: #e2e8f0;
border: 2px solid #94a3b8;
}Різниця між HTML 4.01 та HTML5
Атрибут controls з'явився тільки у HTML5.
Різниця між XHTML та HTML
У XHTML мінімізований запис атрибутів заборонено, тому атрибут controls повинен бути визначений як controls="controls"
Коментарі
Коментарів ще немає — будьте першим!