Введення в HTML5 відео

1. Навіщо нам потрібен елемент <video>?
2. Анатомія елемента <video>
3. Кодеки - ложка дьогтю в бочці меду
4. Більше немає другосортних жителів в Веб
5. Проблеми управління за допомогою клавіатури
6. <Video> добре взаємодіє з іншою частиною сторінки
7. Оформлення відео за допомогою CSS
8. Об'єднання елементів video і canvas
9. Створення власних елементів управління відео

Версія для друку

Ця стаття дасть вам уявлення про елемент <video> і його API. Ми пояснимо, чому підтримка відео в браузерах так важлива, зробимо огляд елемента video в HTML5 і розглянемо найважливіші способи управління відтворенням відео за допомогою JavaScript.

Багато років тому поняття мультимедіа в веб пов'язувалося з MIDI-мелодіями і GIF-анімацією. Завдяки збільшенню пропускної спроможності каналів зв'язку та поліпшення технологій стиснення даних MP3 витіснив MIDI, а відео стало поширюватися повсюдно. За право захопити нішу веб-мультимедіа змагалися багато запатентовані продукти - Real Player, Windows Media Player і інші - поки один з них не вийшов переможцем в 2005 році - їм був Adobe Flash. Це відбулося багато в чому завдяки широкому розповсюдженню цього плагіна, а також той факт, що Flash-технологія стала вибором YouTube; Flash став фактично стандартом для передачі відео в Інтернеті.

Одним з найбільш вражаючих нововведень в специфікації HTML5 є елемент <video>, який дозволяє розробникам вставляти відео безпосередньо на веб-сторінки без необхідності використання будь-яких плагінів. Opera запропонувала стандартний елемент <video> в якості частини HTML5 в 2007 році, а також забезпечила його підтримку в своєму браузері Opera 10.50.

Ця стаття дасть вам уявлення про елемент <video> і його API. Ми пояснимо, чому підтримка відео в браузерах так важлива, зробимо огляд елемента video і розглянемо найважливіші способи управління відтворенням відео за допомогою JavaScript.

Навіщо нам потрібен елемент <video>?

До сьогоднішнього дня якщо ви хотіли вставити відео на сторінку, вам довелося б розриватися між декількома варіантами розмітки. Нижче поміщений приклад, взятий безпосередньо з сайту YouTube:

Перш за все, у нас є елемент <object> - універсальний контейнер для "зовнішніх об'єктів", який дозволяє вставляти Flash-відео на веб-сторінки. Для створення кросбраузерності ми також використовуємо елемент <embed> з дублюванням більшості параметрів елемента <object>. Кінцевий код надто громіздкий і нелогічний.

Анатомія елемента <video>

У порівнянні з заплутаними конструкціями, які необхідні для вставки Flash на сторінку, базова розмітка тега <video> в HTML5 дивно проста:

Зауважте, що в нашому прикладі ми використовуємо нестрогий синтаксис HTML5 - ви не зобов'язані ставити лапки навколо значень атрибутів і можете використовувати прості булеві атрибути, такі як AutoPlay як окремі слова. Якщо ви хочете, ви, звичайно, можете дотримуватися синтаксису XHTML control = "control" і взяти в лапки всі значення атрибутів. Очевидно має сенс вибрати свій стиль кодування, який вам більше підходить і дотримуватися його для однаковості і зручності. У XHTML5 ви повинні використовувати синтаксис XHTML (а також створювати сторінки у вигляді XML з правильним MIME-типом, який в даний час не працює в Internet Explorer).

Призначення атрибутів елемента <video>, використаних в нашому прикладі, очевидно:

Для веб-браузерів, які в даний час не підтримують тег <video>, можна включити альтернативний контент - принаймні він може містити деякий текст і пряме посилання на відео файл, щоб користувач міг завантажити його і відтворити за допомогою будь-якого медіа- плеєра:

Отже, можете перевірити, як працює відео в HTML5 в нашому прикладі з турецькими танцями .

Існує і інші атрибути, про які ми ще не згадали:

Кодеки - ложка дьогтю в бочці меду

Opera підтримує відео-кодек Ogg Theora: Theora - безкоштовний і відкритий відео-формат від Xiph.org Foundation, він може використовуватися для розповсюдження фільмів і відео онлайн і на дискових носіях без ліцензійних обмежень.

Firefox і Chrome також підтримують кодек Theora. Однак, Safari його не підтримує, вважаючи за краще кодек H.264 (який також підтримує і Chrome). Тому нам доведеться конвертувати відео двічі, спочатку в формат кодека Theora, а потім і в H.264, додаючи додаткові елементи <source> з відповідним атрибутом type до відео на веб-сторінці, тим самим дозволяючи веб-браузерам завантажувати той формат, який вони можуть відтворити. Зауважте, що в такому випадку ми не постачаємо атрибутом src сам елемент <video>:

Приклад з використанням двох джерел відео - .ogv і .mp4 , Який повинен працювати в усіх браузерах, що підтримують HTML5 відео, незалежно від підтримуваного кодека.

На момент написання цієї статті (лютий 2010-го) представники Microsoft не зробили офіційної заяви про те, який відео-кодек вони будуть підтримувати (якщо взагалі будуть). Однак, тип файлу MP4 може бути також відтворено за допомогою плагіна Flash, так що вони можуть використовуватися спільно в якості зворотнього зв'язку для Internet Explorer і старих версій інших браузерів. Ознайомтеся з реалізацією цього методу в статті Kroc Camen "Відео для всіх!" , В якій він домагається об'єднання елементів object і embed з новим <video> елементом.

Звичайно, якщо браузери, які не підтримують елемент <video>, спробують використовувати плагіни Quicktime або Flash, насправді ми повернемося до того, з чого почали і не отримаємо ніякої переваги від нових можливостей і удосконалень, які ми описали трохи вище. &quot;У чому тоді сенс?", - запитаєте ви. А ми можемо відповісти, що це перехідний рішення, поки підтримка нового відео елемента не з'явиться в більшості браузерів.

Більше немає другосортних жителів в Веб

Таким чином, ми побачили, що розмітка для нового HTML5-елемента <video> у багато разів більш ясна і зрозуміла в порівнянні тим, як ми зараз вставляємо відео на веб-сторінки за допомогою Flash. Але незалежно від того, наскільки жахливий старий спосіб вставки відео, в більшості випадків він працює, адже так? Так чому б нам не продовжити використовувати традиційний спосіб?

Головна перевага елемента <video> полягає саме в тому, що він -Повноцінне житель в Веб, в порівнянні з жителем околиць object або не проходить валідацію елементом embed (хоча зараз він її проходить в HTML5).

Проблеми управління за допомогою клавіатури

Одна з великих невирішених проблем використання Flash - недоступність управління відтворенням з клавіатури. За винятком Internet Explorer на Windows не існує способу взаємодіяти з Flash-роликом за допомогою клавіатури. І навіть якщо користувачі якимось чином можуть перемістити фокус на Flash-ролик, не існує простого способу повернутися назад на сторінку (якщо тільки це не передбачено в самому Flash-ролику за допомогою програмування на ActionScript). На відміну від цього, браузер повністю відповідає за елемент <video>, він може керувати відтворенням відео і включати кнопки управління в стек табуляції.

Підтримка клавіатури в HTML5 відео в даний час не реалізована у всіх браузерах ... проте, вона вже працює в бета-релізі Opera 10.50.

<Video> добре взаємодіє з іншою частиною сторінки

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

Зазвичай в цьому немає жодної проблеми, але вони можуть виникнути, коли ваша розмітка перекриває область з плагіном. Наприклад, уявімо собі сайт, який містить Flash-ролики, а також меню, що випадає, реалізоване засобами JavaScript і / або CSS, яке повинно розкриватися поверх Flash-ролика. За замовчуванням, область плагіна розміщується поверх веб-сторінки, а це означає, що це меню дивним чином розкриється позаду ролика. Такий же неприємний ефект проявляється і в разі, коли на сторінках присутні "модальні" вікна - будь-які Flash-ролики вставляються поверх інших елементів сторінки. Саме тому багато скрипти, що використовують "модальні" вікна, спочатку відключають всі об'єкти (плагіни) на сторінці, і тільки потім запускаються самі, а після закриття модального вікна, відключені об'єкти відновлюються.

У разі деяких плагінів Flash розробники можуть виправити таку проблему з накладенням Flash-вмісту поверх інших елементів на сторінці додаванням атрибуту wmode = 'opaque' в елементі <object> і еквівалентним тегом <param name = 'wmode' value = 'opaque'> всередині елемента <embed>. Однак, це стає причиною того, що плагін стає повністю недоступним користувачам зі скрінрідерамі і тому його використання краще уникати.

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

Завдяки тому, що елемент <video> є рідною в середовищі браузера, саме браузер піклується про його відображенні. У зв'язку з цим елемент <video> працює також як і будь-який інший елемент на веб-сторінці. Його можна позиціонувати, застосовувати властивість float, перекривати або динамічно змінювати його розміри без будь-яких додаткових хаков. Навіть можливо досягти такого цікавого ефекту, як напівпрозоре відео, просто призначивши йому необхідне значення властивості opacity за допомогою CSS.

Оформлення відео за допомогою CSS

Уже зараз елемент video є частиною ряду відкритих веб-технологій, і ми можемо використовувати CSS, щоб легко оформити відео. Як простий демонстрації того, що можна досягти вже сьогодні, ми застосуємо перехідні ефекти CSS до нашого відео з турецькими танцями , Для зміни його розмірів при спрацьовуванні подій: hover або: focus. ( Читайте керівництво по перехідним ефектів в CSS3 і 2D-трансформацій. )

Об'єднання елементів video і canvas

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

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

Створення власних елементів управління відео

Елементи <video> та <audio> є екземплярами нових медіа-елементів HTML5 DOM, які надають потужний API, дозволяючи розробникам керувати відтворенням відео за допомогою цілого ряду нових методів і властивостей JavaScript. Давайте поглянемо на деякі найбільш цікаві з них, що дозволяють створити власний простий контролер:

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

Тепер у нас є всі основні будівельні блоки, необхідні для створення простого контролера. Перш ніж ми почнемо, хочу вас застерегти: коли ми створюємо свій власний контролер на JavaScript, ми очевидно хочемо придушити все власні кошти управління браузера з управління відтворенням відео. Однак, ми можемо залишити їх в якості запасного варіанту, в разі якщо користувач відключив JavaScript у своєму браузері. З цієї причини ми збережемо атрибути управління відео в нашій HTML-розмітки і програмно видалимо їх під час виконання нашого скрипта. В якості альтернативи ми також можемо встановити значення атрибутів на false - обидва підходи діють однаково. Так як наш власний контролер заснований на написаних нами функціях, ми створимо розмітку самого контролера в JavaScript.

Ознайомтеся з нашим прикладом програмування власних елементів управління відео в HTML5 . Скрипт великий за обсягом, і було б корисно трохи "очистити" його до використання на сайті, але сподіваюся, це допоможе проілюструвати деякі з нових потужних можливостей, які нам відкриває відео в HTML5. Навіть з базовими знаннями JavaScript веб-розробник тепер легко може створювати власні засоби керування відтворенням відео, які прекрасно доповнять дизайн сайту без необхідності створення спеціальних Flash-плеєрів.