Щоб всі могли на мить опинитися в спогадах, ось приклад того, як традиційно вбудовувати відео на веб-сторінку:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Такий синтаксис, звичайно, є все інше, ніж привабливим.
Однак навіть якщо упустити естетичний аспект: Синтаксис у цьому вигляді просто надто схильний до помилок і складний. У HTML5 вбудовувати відео набагато простіше. Для цього використовується елемент video.
Ось приклад того, як можна вбудувати саме цей елемент video:
<video src="video.ogv" width="300" height="200"> Ваш браузер, на жаль, не підтримує HTML5 </video>
Це найпростіший варіант в цьому вигляді. Три атрибути є ключовими для цієї синтаксичної форми. Через src вказується відео для вбудовування. Будь ласка, правильно вказуйте шлях тут. Два атрибути width і height визначають ширину та висоту відео. Якщо не вказати жодне з цих значень, відео буде відображено у своєму оригінальному розмірі. Якщо вказати тільки одне із значень, браузер автоматично розрахує інше значення. Атрибут autoplay вказує браузеру автоматично стартувати відео після завантаження сторінки. Зазвичай цей атрибут не встановлюється, оскільки користувачі переважно не бажають автоматичного відтворення. Це особливо стосується користувачів мобільних пристроїв з обмеженою пропускною здатністю.
Ще одним цікавим атрибутом є controls. Якщо встановити його, браузер покаже вбудовані елементи керування для відтворення та гучності.
<video src="video.ogv" width="300" height="200" controls> Ваш браузер, на жаль, не підтримує HTML5 </video>
Ось результат у браузері:
Через показану панель можна не лише призупинити відео та знову запустити, а й вона містить у собі регулятор гучності.
Через атрибут poster можна вказати зображення, яке відображатиметься до початку відео. Для цього використовується атрибут poster.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Ваш браузер, на жаль, не підтримує HTML5 </video>
Також тут важливо вказувати правильний шлях, щоб зображення дійсно відображалося.
У використанні атрибуту autoplay слід бути обережним. Оскільки цей атрибут вказує на автоматичне відтворення відео, як тільки воно стає доступним.
<video src="video.ogv" width="300" height="200" autoplay> Ваш браузер, на жаль, не підтримує HTML5 </video>
З точки зору трафіку може бути цікавим атрибут preload. Цей атрибут керує передвантаженням. При цьому атрибут може мати наступні значення:
• auto – Браузер може передвантажити весь файл.
• none – Файл не повинен передвантажуватися.
• metadata – Файл може бути передвантаженим.
Якщо атрибут preload відсутній, використовуватимуться налаштування за замовчуванням для браузерів.
Відео та кодеки
Хто займається вбудовуванням та відтворенням відео на веб-сторінках, раніше чи пізніше зіткнеться з проблемою різних кодеків. Завдяки цим кодекам відео можна ефективно стискувати та розпаковувати. Проблема полягає у тому, що виробники браузерів до сьогоднішнього дня не домовилися щодо єдиного формату кодеку. Для HTML5 (і в кінцевому результаті для вас) це означає, що немає однорідних кодеків для відео та аудіофайлів.
Для відео наразі вже утвердилися два формати: Ogg і MP4. Тому ви завжди на безпеці, якщо пропонуєте відео у цих двох форматах. Для цього вказуєте два елементи source елементу video.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Ви не вказуєте джерело відео всередині елемента video. Замість цього там лише робляться загальні вказівки щодо відображення. Вказується, яке відео відображати, через елемент source. Відповідному відео присвоюється атрибут src. Після type іде вказівка, яке це відео або в якому форматі відео.
| Браузер | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Версія 9 і вище | |
| Mozilla Firefox | Так | |
| Google Chrome | Так | Так |
| Opera | Так | |
| Safari | Так | |
| iPhone | Так | |
| Android | Так |
Таблиця показує дилему: Інтерпретація форматів рівномірно розподілена між різними браузерами. Тому практично вимагається вказувати відео в обох форматах.
Через атрибут media, який може бути призначений лише для елемента source, можна зазначити, для якого типу медіа підходить відео. Щоб вказати відео спеціально для певних пристроїв, атрибуту src призначається атрибут media. Через цей атрибут media вказується бажаний тип медіа.
Приклад використання елемента source міг би виглядати наступним чином:
<video width="400" height="300">
<!-- Тільки для мобільних пристроїв -->
<source src="video_mobil.ogg" media="handheld" />
<!—Для всіх інших пристроїв -->
<source src="video_normal.ogg" media="all" />
</video>
Через атрибут media перевіряється, чи це мобільний пристрій. У цьому випадку відтворюється відео менших розмірів. Якщо це інший пристрій, використовується значення all.
Безпечне вбудовування відео
Без сумніву відомо, що HTML5 досі не підтримується всіма браузерами. Це також стосується елемента video. Рішенням є поєднання різних технік вбудовування. Для цього поєднуються відомі елементи object та embed з елементом video. Це може виглядати наступним чином:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Таким чином вбудовані відео будуть програватися в більшості браузерів. Браузери, які знають елемент video, використовують його. Інші браузери, з іншого боку, використовують вказівки в елементі object або саме в елементі embed.
