HTML5. Відео

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML Приклад відео. Взято із Big Buck Bunny.

Спробуйте самі »

Відтворення відео в HTML

До появи специфікації HTML5 відео можна було відтворювати лише у веб-переглядачі з плагіном (наприклад, flash).

HTML5 елемент <video> вказує стандартний спосіб вбудовування відео в веб-сторінку.


Підтримка браузерами

Цифри в таблиці визначають першу версію браузера, яка повністю підтримує елемент <video>.

Element
<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

Щоб програвання відео розпочиналось автоматично, використовуйте атрибут 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, які можуть сповіщати вас, коли відео починає відтворюватися, призупинятись, тощо.

Приклад: використання JavaScript




Відео взято із Big Buck Bunny.

Спробуйте самі »

Для повної DOM довідки, перейдіть на HTML5 Audio/Video DOM Довідник.


HTML5 Відео Теги

Тег Опис
<video> Визначає відео чи фільм
<source> Визначає безліч мультимедійних ресурсів для елементів медіа, наприклад <video> та <audio>
<track> Визначає текстові доріжки в медіаплеєрах


warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.