Embed і object - Html теги для відображення медіа контенту (відео, флеш, аудіо) на веб сторінках

1. Embed і object - для чого вони потрібні і як працюють
2. Embed - невалідний тег використовується всюди
3. Object і Param - вставка медіа контенту

Привіт, шановні читачі блогу KtoNaNovenkogo.ru. Сьогодні ми поговоримо про теги ( що це таке? ) Embed і object, які служать для вставки на веб сторінки медіа файлів (аудіо, відео, флеша).

Зараз ми живемо в епоху поступового розвитку стандарту Html 5, коли для вставки відео і аудіо з'явилися спеціальні теги Video і Audio, які на даний момент не повністю підтримуються всіма браузерами і існує ще невизначеність з використовуваними кодеками (але вони вже використовуються при верстці сайтів ).

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

Embed і object - для чого вони потрібні і як працюють

Вебсторінки створюються за допомогою мови Html. Ми обрамляемо наявний на ній текст (контент) відповідними тегами для його структуризації (створюємо списки , таблиці , гіперпосилання , вставляємо зображення за допомогою тега Img ).

До цього документу підключаємо файли стилів CSS , Які будуть керувати його зовнішнім відображенням (задавати колір і фон через color і background , Відступи і рамки через padding, margin і border , Плавання в потрібну сторону через float і clear , Здійснювати позиціювання за допомогою position , А також багато іншого, що було мною описано в Цей довідник ).

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

JavaScript взаємодіє не тільки з Html документом, а й з CSS. Ми з вами цю область взагалі не зачіпали в силу її досить великої складності, та й більшість виникаючих перед вебмайстром питань вже давно вирішені і винаходити велосипед вам вже не доведеться (є готові рішення на JavaScript).

У новій версії мови гіпертекстової розмітки Html 5, який поки що ще знаходиться в стадії формування (і ще досить довго буде перебувати), вже буде описаний JavaScript, тобто він фактично став частиною мови гіпертекстової розмітки.

Дуже багато можливостей нової мови розмітки Html 5 пов'язані саме з впровадженням в нього JavaScript. Все це зав'язано різними функціональними доповненнями, які реалізуються саме на ньому. Загалом, можливості п'ятої версії будуть істотно відрізнятися від наявних в поточній версії мови, але коли це пишність отримає офіційний статус і буде підтримуватися всіма наявними браузерами, поки невідомо.

Елементи embed і object відносяться до тієї ж самої категорії, що й зображення (img), і фрейми ( Iframe ), А саме - рядкові елементи з заміщаються контентом (про малі і блокові теги читайте в статті про CSS правило display ).

Поводиться такий елемент як рядковий, але всередині нього відображається сторонній зовнішній контент (картинка в разі Img або відео і флеш в разі Object або Embed). Будь-який з цих тегів на увазі наявність зовнішнього файлу, який буде довантажувати в цю саму область, задану атрибутами розміру.

Т.ч. виходить, що на сьогоднішній день весь медіа контент вставляється на сайти саме за допомогою Img, Iframe, Object і Embed (малих з заміщаються контентом). За допомогою останніх двох можна вставляти флеш і відео. До речі, досить цікаво те, що їх два і вони по суті дублюють один одного з невеликою різницею в синтаксисі написання. Як таке могло статися?

Виявляється, що embed був розроблений і використовувався в браузері Netscape, про історію розвитку якого і його програш в «війні браузерів» я вже писав в статтях про Мазілу Фаерфокс і Інтернет Експлорер .

Ну, а в цей час йому була розроблена альтернатива у вигляді Object. Однак скоро і перший варіант став підтримуватися всіма популярними браузерами, хоча і не увійшов до специфікації Html 4.01 (тобто, за великим рахунком, Embed є не дійсним, але тим не менш часто використовуваним), що і призвело до якогось дуалізму.

Отже, обидва тега є парними і на сторінці вони фактично нічого не роблять, а тільки задають область, в яку має щось завантажитися. Мені найчастіше доводиться використовувати їх для вставки флеш банера , Який пропонує розмістити мій черговий рекламодавець . Він представляє з себе файлик з розширенням swf, який відтворюється завдяки встановленому майже у всіх користувачів мережі плагіну Adobe Flash Player . Моє ж завдання полягає в тому, щоб показувати його протягом обумовленого терміну в обумовленому місці мого блогу.

Embed - невалідний тег використовується всюди

Як я вже згадував, у нас є фактично два варіанти реалізації. Давайте почнемо з елементу Embed, в якому ви повинні будете обов'язково вказати два атрибути - Type і Src. Будучи вже пропаленими знавцями Html, ви, звичайно ж, здогадалися, що за допомогою першого атрибута ми повинні будемо вказати тип довантажувати медіа контенту, а за допомогою Src - задати шлях до файлу (у вигляді відносних або абсолютних посилань) з цим самим медіа потоком.

Давайте вставимо на веб-сторінку годинник на флеш, файл з якими лежить за адресою https://ktonanovenkogo.ru/wp-content/uploads/clock_114.swf. В принципі, багато браузери самі здогадаються про тип вставляється вами файлик, навіть якщо Type ви не пропишіть в тезі Embed. Однак, краще буде відразу звикати слідувати правилам, тому що в Html 5 з цим буде вже набагато суворіше. Отже, що ж можна використовувати в якості значення атрибута Type?

Тільки так звані MIME-типи об'єкта або, іншими словами, Internet Media Types (тобто умовні позначення типів об'єктів), які можливо передавати по мережі інтернет . Подивитися їх можна, наприклад, на цій сторінці Вікіпедії . У нашому випадку для флеша потрібно буде вказати тип «application / x-shockwave-flash»:

Таким чином можна за допомогою Embed вставляти будь-які типи медіа файлів, наприклад, все ті ж картинки у форматах jpg, gif, png або ж відео (mp4, avi і ін.). Потрібно буде тільки вказати відповідний MIME-тип. Наприклад, для зображень це може бути «image / jpeg», а для відео - «video / mp4».

Давайте для прикладу вставимо за допомогою Ембед картинку у форматі gif:

Ну, і відео спробуємо вставити. Я взяв варіант ролика про Apple Ipad 2 в форматі Mp4, який мені довелося нещодавно отримати на халяву від Профіт Партнера (голос на ролику не мій, а сина, щоб ви не засумнівалися в моїй дорослості):

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

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

Завантажується невеликий ролик в форматі SWF, який представляє з себе оболонку флеш програвача з кнопками управління. А вже в нього завантажується відео потік (зазвичай у форматі Flv).

Вся робота по відтворенню цього відео лягає на центральний процесор комп'ютера користувача, а новий тег з Html 5 для вставки відео (під назвою video) буде суттєвим кроком вперед, тому що дозволить задіяти і графічний адаптер комп'ютера для перегляду відео потоку. Але тег video поки не буде однозначно працювати в усіх браузерах, в чому ви і можете наочно переконатися:

Розмір області, що виділяється під вміст Embed браузером, вибирається довільно, але ви вільні використовувати всі ті ж самі атрибути, що і для Img, щоб вказати розмір по ширині і висоті, а так само задати вирівнювання через Align (хоча, те ж саме можна зробити і через CSS).

Наприклад, при вставці відеоролика я як раз використовував width і height для явної вказівки області відводиться під відео. Але у цього тега є і додаткові атрибути, які, наприклад, при показі флеша дозволяють видалити зайві пункти з його контекстного меню. Для цього достатньо лише вказати атрибут menu = "false".

Що стосується флеша, інформацію про додаткові атрибутах тега Embed можна буде отримати тут .

Т.ч. не дивлячись на те, що він не є дійсним для версії Html 4.01 (але у версії 5 він вже буде присутній), Ембед буде працювати в будь-яких браузерах (навіть в старих IE).

Інша справа, що застосування спеціальних атрибутів для управління відео (autostart, volume, loop) в браузері Google Chrome результату не дало, бо ролик все одно стартував автоматично і на максимальній гучності. Це сильно дратує, тому я вставив відеоролик за допомогою Video з арсеналу Html 5, а не Embed. Можливо, що в інших браузерах будуть проблеми з програванням цього ролика.

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

Object і Param - вставка медіа контенту

Однак, в специфікації Html консорціуму WC3 описаний інший елемент для вставки медіаконтенту під назвою Object. У нього є знову ж два обов'язкових атрибути: type і data. Перший має точно таке ж призначення, як і було описано вище, а отже в ньому потрібно буде використовувати всі ті ж MIME-типи. Ну, а Data служить для вказівки шляху до файлу з контентом.

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

У Param найчастіше застосовується два атрибути: name і value. Для того, щоб медіа контент нормально відображався в IE, потрібно в Парам продублювати шлях файлу:

Крім тегів Param всередині елементів Object можна використовувати будь-який Html код з контентом (у мене для прикладу вставлено <p> Упс </ p>), який буде показаний користувачеві на веб сторінці тільки в тому випадку, якщо ви вкажете в Data невірний шлях до файлу з контентом (або він буде з яких-небудь причин недоступний). Ну, типу, альтернативного тексту при виведенні зображень.

Для того, щоб урізати контекстне меню флеш файлу (клацніть правою кнопкою миші по годинки внизу і вгорі цього абзацу), потрібно додати Param з відповідними атрибутами і їх значеннями:

За поточної специфікації у Object є досить багато атрибутів, але більшість з них вже давно застаріли і в специфікації Html 5 їх вже не буде. Де взяти значення для атрибутів Param в плані знущання над флешем я вже наводив, але повторюся .

Значення для нього, в плані управління програвання відео, можна подивитися тут . Є можливість включення або відключення автозапуску, показу панелі управління.

Embed і object увійдуть до майбутньої специфікацію Html 5, але, можливо, що їх функції будуть при цьому якимось чином розділені.

Удачі вам! До швидких зустрічей на сторінках блогу KtoNaNovenkogo.ru

Збірки по темі

Використовую для заробітку