Здрастуйте, шановні читачі блогу . Сьогодні ми поговоримо про теги (що це таке?) embed і object, які служать для вставки на веб сторінки медіа файлів (аудіо, відео, флеша).
Зараз ми живемо в епоху поступового розвитку стандарту Html 5, коли для вставки відео і аудіо з’явилися спеціальні теги Video і Audio, які на даний момент не повністю підтримується всіма браузерами і існує ще невизначеність з використовуваними кодеками (але вони вже використовуються при верстці сайтів).
Однак, навіть у майбутній специфікації Html 5 елементи embed і object будуть описані, а значить, має сенс вже зараз вивчити способи вбудовування медіа контенту на сторінки сайтів з допомогою цих тегів, які будуть на сто відсотків працювати в будь-якому з кращих браузерів.
Embed і object — для чого вони потрібні і як працюють
Веб-сторінки створюються за допомогою мови Html. Ми обрамлялися наявний на ній текст (контент) відповідними тегами для його структуризації (створюємо списки, таблиці, гіперпосилання, вставляємо зображення за допомогою тега Img).
До цього документу підключаємо файли стилів CSS, які будуть керувати його зовнішнім відображенням (задавати колір і фон через background color і, відступи і рамки через 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:///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 код з контентом (у мене для прикладу вставлено
Упс
), який буде показаний користувачеві на веб сторінці тільки в тому випадку, якщо ви вкажете в Data невірний шлях до файлу з контентом (або він буде з якихось причин недоступний). Ну, типу, альтернативного тексту при виведенні зображень.
Для того, щоб урізати контекстне меню флеш файлу (клацніть правою кнопкою миші по часикам внизу і вгорі цього абзацу), потрібно додати Param з відповідними атрибутами та їх значеннями:
За поточної специфікації у Object є досить багато атрибутів, але більшість з них вже давно застаріли і в специфікації Html 5 їх вже не буде. Де взяти значення для атрибутів Param в плані знущання над флешем я вже наводив, але повторюся.
Значення для нього, в плані управління програвання відео, можна подивитися тут. Є можливість включення або відключення автозапуску, показу панелі управління.
Embed і object ввійдуть в майбутню специфікацію Html 5, але, можливо, їх функції будуть при цьому якимось чином розділені.
Удачі вам! До зустрічей на сторінках блогу
