Встраивание объектов в HTML. Как правильно использовать элемент Embed?

встраивание объектов в html. как правильно использовать элемент embed?

Роль встраиваемых объектов

В прошлых статьях рассматривались специальные элементы, позволяющие воспроизводить видео и прослушивать аудио-треки. Они появились с приходом HTML5, и значительно упростили реализацию данных возможностей. Тем не менее, есть ряд задач, не имеющих универсального решения.

Иногда необходимо встроить в страницу специфичные объекты, такие как: flash-анимация, 3D-графика, PDF и т.д. Основная проблема в том, что некоторые из встраиваемых объектов не поддерживаются по умолчанию. Чтобы использовать их, необходимо установить в браузер дополнительные плагины. Вспомните, видели ли вы когда-нибудь сообщение «у вас отсутствует или заблокирован плагин Adobe Flash Player»?

Заметка
По сути, использовать встраиваемые объекты нежелательно. Пользователь с большей вероятностью покинет ваш сайт, чем будет тратить время на поиск и установку недостающего плагина. Встроенный функционал HTML может быть заменен специальными программными библиотеками, написанными на JavaScript, что исключит использование плагинов.

Создание встраиваемого объекта

HTML позволяет добавить объект специфичного типа с помощью элемента <embed>. Он не требует закрывающего тега. Расположение файла необходимо указать в атрибуте src. Браузер автоматически определит его MIME-тип. Тем не менее, вы можете задать его самостоятельно через атрибут type.

Использование атрибута pluginspage позволит указать URL-адрес, с которого можно скачать плагин, необходимый для обработки объекта. Если таковой не установлен в браузере, у пользователя будет запрошено разрешение на скачивание и установку.

С помощью атрибутов height и width элемента <embed> задаются размеры встраиваемого объекта. Стандарт HTML5 требует указывать их в пикселях (целочисленным значением).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания встраиваемого объекта</title>
    </head>
    <body>
        <embed src="/clock.swf" type="application/x-shockwave-flash" height="250" 
            width="250" pluginspage="https://get.adobe.com/flashplayer">
    </body>
</html>
primer-otobrazenia-cstroennogo-objecta-v-html
Рис 1. Отображение объекта в браузере

Дополнительные настройки

Атрибуты, описанные нами выше, являются базовыми. Существует масса дополнительных настроек, которые зависят от выбранного типа встроенного объекта. Так видео и аудио файлам можно указывать атрибут menu. Его значение true вызовет показ полосы прокрутки, изменения громкости, кнопки паузы и т.д.

Для flash допустимо указание атрибута FlashVars, который может участвовать во внутренних процессах. Например, если вы добавляете мини-игру, то в этом атрибуте могут содержаться её настройки FlashVars=“map=default&player=name“.

Важно
Разнообразие встраиваемых элементов довольно велико. Каждый из типов может определять свои атрибуты. Их рассмотрение не является целю данного урока.

Последние публикации