HTML5 відео
Багато сучасних сайтів відображають відео. HTML5 забезпечує стандарт для його показу.
Відео в Інтернеті
До сих пір показ відео на веб-сторінці не був стандартом.
Сьогодні більшість відеоматеріалів показується через плагіни (наприклад, flash). Однак, не всі браузери мають ті ж плагіни.
HTML5 вказує стандартний спосіб включити відео за допомогою елементу video.
Відео формати
В даний час є 3 підтримувані відео формати для елементу video:
|
Формат |
IE |
Firefox |
Opera |
Chrome |
Safari |
|
Ogg |
Ні |
2.5 |
2.5 |
5.1. |
Ні |
|
MPEG 4 |
Ні |
Ні |
Ні |
5.1. |
3.1. |
|
WebM |
Ні |
Ні |
2.6 |
6.3. |
Ні |
· Ogg = файли Ogg з відео кодеком Theora і аудіо кодеком Vorbis
· MPEG4 = MPEG 4 файли з відео кодеком H.264 та AAC аудіо кодеком
· WebM = WebM файли з VP8 кодеком відео та аудіо кодеком Vorbis
Як це працює
Щоб показати відео в HTML5, все що вам потрібно, це:
|
<video src="movie.ogg"
controls="controls"> |
Контрольні атрибути призначені для додавання відтворення, паузи, і управління рівнем гучності.
Також варто включати атрибути ширини і висоти.
Як вставити вміст між <video> і </video> тегами для браузерів, які не підтримують відео елементи:
Приклад
|
У наведеному вище прикладі використовується файл Ogg, що буде працювати в Firefox, Opera і Chrome.
Щоб змусити відео працювати в Safari і наступних версіях Chrome, ми повинні додати MPEG4 і WebM файли.
Відео елемент дозволяє використовувати кілька джерел елементів. Джерела можуть посилатись на різні відео файли. Браузер буде використовувати перший формат, котрий розпізнає:
Приклад
|
Internet Explorer
Internet Explorer 8 не підтримує відео елемента. В IE 9 буде підтримка відео елементів з використанням MPEG4.
Усі атрибути <video>
|
Атрибут |
Значення |
Опис |
|
audio |
вимкнено |
Визначення за замовчуванням стану аудіо. В даний час дозволено тільки "вимкнено" |
|
autoplay |
автозапуск |
Якщо присутній, то відео буде починати грати, як тільки буде готове |
|
controls |
управління |
При наявності буде відображатися, наприклад, як кнопка відтворення |
|
height |
пікселі |
Встановлює висоту відео плеєра |
|
loop |
повтор |
Якщо присутній, відео буде повторно програватись щоразу, коли закінчилось |
|
poster |
URL |
Вказує URL-адресу зображення, що представляє відео |
|
preload |
попереднє завантаження |
Якщо присутній, відео буде додано при завантаженні сторінки, і готове до запуску. Ігнорується, якщо "автозапуск" присутній |
|
src |
URL |
URL-адреса відео |
|
width |
пікселі |
Встановлює ширину відео плеєра |