1. Вступ
2. 1. Розмітка
3. 3. Що робити з діючими версіями IE, які не підтримують відеотег?
4. 4. Кодування відеофайлів
5. 5. Найцікавіше
6. 5.1 Відео та інші елементи HTML
7. 5.2 Відео та JS
8. 5.3. Відео та CSS
9. 5.4. Відео та canvas
10. 5.5. Відео та SVG

Вступ

Відеотег - це одна з найпопулярніших функцій HTML5. Часто відеотег представляють як альтернативу технології Flash на веб-сайтах, але це далеко не все, що він може. Він увійшов в число тегів HTML зовсім недавно, але його можливості і підтримка різними браузерами розширюються з вражаючою швидкістю. Як ви побачите в цьому керівництві, основна перевага відеотега - його природна інтеграція з іншими рівнями веб-програмування, такими як CSS і JavaScript, а також з іншими тегами HTML.

1. Розмітка

Для демонстрації HTML-відео на сайті достатньо наступних ліній:

У цьому фрагменті використовується тег <source>, що дозволяє вказати кілька варіантів формату на випадок, якщо якийсь з них не підтримується браузером користувача. Детальніше ми обговоримо це питання в наступному розділі.

Також можна використовувати простий формат відео, і тоді синтаксис буде таким же, як для тега зображень. У найближчому майбутньому, коли все браузери будуть підтримувати єдиний формат відео, цей синтаксис стане використовуватися найчастіше.

А поки зосередимося на попередньому, більш поширеному зараз варіанті. Найважливіший момент - правильно вказати MIME-тип для обробки відеофайлів сервером в заголовку Content-Type. В іншому випадку відео може працювати некоректно, навіть якщо використовується локальна копія з вашого сайту. В Apache httpd.conf досить додати наступні рядки:

Якщо ваш додаток працює на платформі Google App Engine, потрібно додати в файл app.yaml приблизно наступний код (окремо для кожної частоти):

Щоб підвищити ефективність роботи клієнта, при використанні декількох форматів потрібно вказувати в тегах source атрибут type. В цьому випадку браузер зможе вибрати відповідний формат для завантаження і відтворення. Іншими словами, він не буде завантажувати формати, які не зможе відтворити, а значить, сайт буде працювати швидше.

можна уявити як ZIP-файл, який містить закодований відео- та аудіосигнал. В Інтернеті актуальні формати WEBM, MP4 і OGV:

• = H.264 + AAC
• = Theora + Vorbis
• = VP8 + Vorbis

Відеотег розвивається на диво швидко. Всього рік тому він підтримувався тільки браузером Safari і тільки в стабільній версії. Тепер відео HTML5 підтримують всі сучасні браузери, включаючи IE9. Що стосується кодеків, розробники Firefox, Chrome і Opera домовилися включити підтримку WEBM в якості загального відеоформату, використовуючи проект WebM . Internet Explorer також буде його підтримувати, якщо кодек встановлений на комп'ютері (ми сподіваємося, що в майбутньому ця вимога буде скасовано).

Примітка. На момент складання керівництва браузер Safari не підтримував формат WEBM.

У цьому прикладі видно, що браузер може відтворити один або два з трьох зазначених нами форматів (коли Ви бачите все три, вважайте, що вам пощастило):

На момент складання керівництва (серпень 2010 року) найбільш безпечна комбінація форматів, що гарантує відтворення відео в будь-якому браузері, виглядала приблизно так, як в цьому фрагменті:

Примітка. Якщо вам потрібно, щоб відео завантажувалося в iPad, як перший варіант необхідно вказати формат MP4. Це пов'язано з помилкою в пристрої, і цей момент потрібно враховувати, поки проблема не буде усунена.

Як я вже говорив, майже всі розробники браузерів домовилися підтримувати загальний формат відео. Таким чином, менш ніж через рік в мережі, швидше за все, буде використовуватися наступний код:

Одна з основних проблем, пов'язаних з форматом MP4, полягає в тому, що його відеокодек (h.264) закритий, а ліцензійні збори за його використання розраховуються дуже складно. Більш детальну інформацію про це форматі можна знайти в Цей розділ .

Ще одна проблема з форматом MP4 - необхідність вказувати атрибут type більш точно, ніж для інших форматів, і з урахуванням профілю, який використовувався для кодування відео. Найпоширеніший профіль - avc1.42E01E, mp4a.40.2, але для впевненості обов'язково звіряйтеся з цим списком профілів .

Незважаючи на те що корпорація Майкрософт оголосила про підтримку відеотега і інших елементів HTML5 в браузері IE9, швидкість переходу її користувачів на нові версії нижче, ніж у інших основних браузерів. Про це ми поговоримо в наступному розділі.

3. Що робити з діючими версіями IE, які не підтримують відеотег?

Перехід на Flash

Також в якості рішення можна використовувати технологію Flash. Певні відеоформатів можуть зажадати повторної кодування в формат, сумісний з Fash-програвачем. Є і хороша новина: компанія Adobe пообіцяла включити в свій програвач підтримку формату WEBM, але точні терміни поки не відомі. Найбільший недолік цього рішення в порівнянні з розширенням Chrome Frame полягає в тому, що Flash-програвач - це сильно погіршена версія користувальницького інтерфейсу і розширених функцій, створених для відеотега. Детально ця технологія розглядається в Короткому посібнику по реалізації аудіо за допомогою HTML5 .

4. Кодування відеофайлів

Для кодування відеофайлів у формати, зазначені в попередньому розділі, можна використовувати програму Miro Converter , Яка підходить як для Windows, так і для Mac. Вона не відрізняється великою кількістю налаштувань, але включає найбільш поширені варіанти для Інтернету, в т. Ч. Три формату, що розглядаються в даному керівництві. Фактично це оболонка для службових програм ffmpeg і ffmpeg2theora , Які працюють в системах Windows, Mac і Linux, запускаються з командного рядка і приймають додаткові параметри. Детальніше про цей інструмент можна прочитати на веб-сайті divintohtml5.org .

5. Найцікавіше

Як було сказано у вступі, основна перевага відеотега в HTML5 - його інтеграція з іншими рівнями веб-програмування. У наступному прикладі ми покажемо вам, які можливості це відкриває.

5.1 Відео та інші елементи HTML

Тепер в відеопрогравачі можна використовувати всі звичайні атрибути HTML. Наприклад, в наведений нижче фрагмент коду ми включили tabindex, щоб зробити доступною клавіатуру програвача. Є й нові атрибути відеотега, які, скоріше, характерні для аудіо, такі як loop і autoplay. Атрибут poster задає зображення, яке буде відображатися при початковому завантаженні відео, а controls дозволяє вказати, що замість створення окремих елементів управління їх повинен автоматично підготувати браузер. Атрибут preload можна використовувати для завантаження відео у фоновому режимі при завантаженні сторінки, навіть якщо відтворення ще не почалося.

Повна інтеграція відеотега як власного елемента браузера вирішує деякі існували раніше проблеми з вбудованими програвачами незалежних розробників, такі як перетягування меню, накладення фреймів на програвач і дивна поведінка макета при динамічній зміні розміру інших елементів HTML поруч з відео.

Як тільки відео перестає бути чужорідним вбудовуваним об'єктом, виникають і інші переваги для користувачів. Наприклад, навіть якщо у фокусі знаходиться програвач, такі дії як прокрутка сторінки і натиснення клавіш на клавіатурі будуть повністю функціональні.

Примітка. Для збереження синтаксису XHTML в контексті HTML 5 при створенні багатомовних документів атрибути в коді повинні виглядати наступним чином:

5.2 Відео та JS

Відеотег підтримує ряд атрибутів і методів, які дозволяють більш точно налаштовувати відео з JS-коду. Побачити їх у дії можна в наступному прикладі .

До відеотегу, як і до будь-якого іншого елементу HTML, можна прикріплювати такі стандартні події, як перетягування, рух миші, виділення і т. Д. При цьому елемент video підтримує безліч нових подій, які можна відстежувати (контролювати) при відтворенні, постановці на паузу або завершення відео. Оскільки при завантаженні відеофайлу можуть виникати різні проблеми, передбачено безліч подій для тонкого управління процесом завантаження як на рівні мережі (loadstart, progress, suspend, abort, error, emptied, stalled), так і на рівні буферизації (loadedmetadata, loadeddata, waiting, playing , canplay, canplaythrough).

На найпростішому рівні можна прикріпити подія canplay, що дозволяє приступити до роботи з відео.

В Інтернеті вже є кілька персоналізованих елементів для управління програвачами. У наведеному нижче прикладі ми використовуємо деякі елементи для управління одночасним відтворенням двох відеофайлів і імітації ефекту перемотування вперед за допомогою атрибута playbackRate. Для зміни гучності відео використовуйте повзунок.

5.3. Відео та CSS

Відеотег займає важливе місце в моделі DOM, і для його оформлення можна використовувати традиційні елементи CSS (межа, непрозорість і т. Д). Але вся принадність полягає в тому, що можна задіяти і нові риси CSS3: відображення, маски, градієнти, трансформації, переходи і анімації.

Наведіть покажчик миші на наступні фрагменти відео та подивіться, як вони працюють:

5.4. Відео та canvas

Canvas - це ще один елемент HTML5, поєднання якого з відеотегом відкриває широкі можливості.

У наступному прикладі ми скористаємося двома функціями елемента <canvas> для імпорту і експорту зображень. Одна з них, метод drawImage, дозволяє імпортувати картинки з трьох різних джерел: елемента зображення, іншого елемента canvas і елемента <video>. Це означає, що кожен раз при виконанні цього методу canvas буде імпортувати і обробляти поточний фрейм відео.

Друга функція тега <canvas>, яку ми використовуємо, є метод toDataURL, що дозволяє експортувати вміст елемента canvas в зображення. Натисніть кнопку відтворення в наступному відео і подивіться, як кожні півтори секунди з нього створюється картинка. Використовуваний для імпорту і експорту елемент canvas фактично прихований.

У наступному коді видно, як ми створюємо інтервал тривалістю 1,5 секунди і вказуємо в якості джерела для методу drawImage елемент video:

У наступному прикладі ми робимо ще один крок. Якщо збільшити періодичність імпорту і видачі зображення з відео, можна зімітувати в canvas вихідну частоту фреймів відеофайлу. Це дозволяє використовувати в canvas такі ж перетворення, як і в відео.

Зліва відтворюється вихідне відео. У центрі знаходиться елемент canvas, в який зображення імпортуються кожні 33 мілісекунди. Другий елемент canvas справа зазнає все перетворення і в той же час імпортує зображення з першого canvas. Ми використовуємо два елементи canvas, тому що в цьому випадку продуктивність набагато вище, ніж при імпорті зображень і перетвореннях, які виконуються одним і тим же елементом.

Таку ж технологію імпорту зображень можна використовувати і на платформі WebGL . Вона дозволяє, наприклад, імпортувати фрейми відео і демонструвати їх на обертовому тривимірному кубі. Більш детальну інформацію можна знайти на веб-сайті MDC .

5.5. Відео та SVG

Технологія SVG дозволяє запрограмувати відображення і обробку векторної графіки, але підтримує і інші функції, такі як ефекти фільтра SVG . З їх допомогою можна виділити певний елемент моделі DOM і застосувати до нього готові ефекти: розмивання, композицію, плитку і т. Д. На момент складання керівництва (серпень 2010 року) Firefox 4 і IE9 підтримують вбудований SVG, що дозволяє виділяти елемент відео за допомогою HTML і CSS (в наведеному нижче прикладі ми використовуємо JavaScript і canvas, щоб він працював і в браузерах, поки що не підтримують SVG).

Натисніть, щоб вимкнути фільтр розмивання