HTML5 Відео
Відтворення відео в HTML
До появи специфікації HTML5 відео можна було відтворити лише у веб-браузері з плагіном (наприклад, flash).
HTML5 елемент <video> вказує стандартний спосіб вбудовування відео на веб-сторінку.
Підтримка браузерами
Цифри в таблиці визначають першу версію браузера, яка повністю підтримує елемент <video>.
| Елемент | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML елемент <video>
Щоб показати відео в HTML, використовуйте елемент <video>:
Приклад
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не поддерживает тег video.
</video>
Спробуйте самі »
Як це працює
Атрибут controls додає елементи керування відео, такі як відтворення, призупинення та рівень звуку.
Рекомендується завжди включати атрибути width та height. Якщо height (висота) та width (ширина) не задані, сторінка може мерехтіти при програванні відео.
Елемент <source> дозволяє вказувати альтернативні відео, з яких браузер може вибирати. Браузер використовуватиме перший розпізнаний формат.
Текст між тегами <video> та </video> буде відображатися лише у браузерах, які не підтримують елемент <video>.
HTML <video> Автопрогравання
Щоб програвання відео розпочиналося автоматично, використовуйте атрибут autoplay:
Приклад
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ваш браузер не підтримує тег video.
</video>
Спробуйте самі »
Атрибут autoplay не працює на мобільних пристроях, таких як iPad та iPhone.
HTML Video - Підтримка браузерами
У HTML5 є три відеоформати, що підтримуються: MP4, WebM і Ogg.
Підтримка браузерами різних форматів:
| Браузер | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (from Opera 25) | YES | YES |
HTML Відео - Типи Медіа
| Формат файла | Тип медіа |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML відео - методи, властивості та події
HTML5 визначає методи, властивості та події DOM для елемента <video>.
Це дозволяє завантажувати, відтворювати та призупиняти відео, а також встановлювати тривалість та гучність.
Є також події DOM, які можуть повідомляти вам, коли відео починає відтворюватися, зупинятися тощо.
Для повної DOM довідки, перейдіть на HTML5 Аудіо/Відео DOM Довідник на нашому сайті W3Schools українською.
HTML5 Відео теги
| Тег | Опис |
|---|---|
| <video> | Визначає відео або фільм |
| <source> | Визначає множинність мультимедійних ресурсів для елементів медіа, такі як <video> та <audio> |
| <track> | Визначає текстові доріжки в медіаплеєрах |
