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

16 Май, 2012

Здравствуйте, уважаемые читатели блога 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 — задать путь до файла (в виде относительных или абсолютных ссылок) с этим самым медиа потоком.

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

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

<embed type="application/x-shockwave-flash" src="http://ktonanovenkogo.ru/wp-content/uploads/clock_114.swf"></embed>

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

Давайте для примера вставим с помощью Эмбед картинку в формате gif:

<embed type="image/gif" src="http://ktonanovenkogo.ru/image/5.gif"></embed>

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

<embed width="545" height="300" type="video/mp4" src="http://ktonanovenkogo.ru/image/apple-ipad-2.mp4"></embed>

Вставленное таким образом видео имеет инструменты управления, с помощью которых можно ставить его на паузу, перематывать, отслеживать хронометраж и регулировать громкость звука. Но не во всех браузерах это будет отображаться.

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

<embed width="540" height="300" type="application/x-shockwave-flash" src="http://www.youtube.com/v/ypf9GyJ594o?version=3&amp;hl=ru_RU"></embed>

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

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

<video controls="controls" name="media" src="http://ktonanovenkogo.ru/image/apple-ipad-2.mp4"></video>

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

Например, при вставке видеоролика я как раз использовал width и height для явного указания области отводимого под видео. Но у этого тэга есть и дополнительные атрибуты, которые, например, при показе флеша позволяют удалить лишние пункты из его контекстного меню. Для этого достаточно лишь указать атрибут menu="false".

<embed menu="false" type="application/x-shockwave-flash" src="http://ktonanovenkogo.ru/wp-content/uploads/clock_99.swf"></embed>

Касаемо флеша, информацию о дополнительных атрибутах тега 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, нужно в Парам продублировать путь файла:

<object type="application/x-shockwave-flash" data="http://ktonanovenkogo.ru/wp-content/uploads/clock_116.swf">
<p>Упс</p>
<param name="move" Value="http://ktonanovenkogo.ru/wp-content/uploads/clock_114.swf">
</object>

Упс

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

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

<object type="application/x-shockwave-flash" data="http://ktonanovenkogo.ru/wp-content/uploads/clock_128.swf">
<param name="move" Value="http://ktonanovenkogo.ru/wp-content/uploads/clock_114.swf">
<param name="menu" Value="false">
</object>

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

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

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Html для чайников

Комментарии и отзывы

Алексей

при быстрой перемотке страниц вверх или вниз- все часы едут,едет код,едет изображение

то ли хром не успевает, то ли еще рано такие тэги использовать

Алексей

Я извиняюсь за свою глупость, но куда нужно вставлять все эти коды?

Дмитрий

Алексей: ну, если у Вас статичный сайт, то в Html код нужной страницы, а если динамичный на движке, то либо непосредственно в статью через Html (визуальный) редактор, либо в файл шаблона WordPress, модуль Joomla или чего то еще подобное.

Игорь

извиняюсь что не в тему но почему вы перестали ставить в начале страницы меню статьи связано ли это с продвижением и если да то какие последствия?

Дмитрий

Игорь: да нет, просто статья небольшая.

iva

70% текста просто выкинуть, ещё 20% порезать.

Статью хавать только роботам. За труды спасибо, но уж очень тяжело читать такой текст, в режиме перемотки схватил самое нужное.

Box

Если такой умный, то иди на сайты для профессионалов и читай статьи, описывающие тему в двух словах.

Именно благодаря таким подробным текстам я наконец-то въехал в непонятные мне моменты.

Иван

Согласен с тем что несколько раздут текст и есть повторения и штампы. Но это не такая уж большая проблема и легко поправимая, говорю с точки зрения журналиста. Но огромный плюс в том что подробно описываются возможности HTML кода. В этой статье почерпнул для себя много нового. Спасибо автору за инфу и желаю в дальнейшем оттачивать свое перо.

Vlad

Дмитрий все понятно по Embed и object. Непонятно как работать с аудиофайлами(МР3). Буду благодарен за пояснение

Rjhjkm

Ребят, надо понимать, что многие статьи на сайте приведены для внимания тех, кто желает въехать в тему по быстрому, либо вспомнить старое.

Если вы профи, и вас мало чем удивишь, то причина вашего нахождения тут не выдержит критики. А вот всем остальным этот ресурс очень нужен.

Подписаться не комментируя