Вставка контента при помощи плагинов
Элементы object и embed возникли как способ расширить возможности браузера, добавляя поддержку плагинов, которые могут обрабатывать контент, который браузер не поддерживает напрямую. Эти элементы были введены во времена браузерных войн, о чем я говорил в главе 1, и каждый из них был придуман разными «лагерями».
Ранее элемент object являлся частью спецификации HTML4, а элемент embed нет, даже несмотря на то, что элемент embed широко использовался. Чтобы установить равенство между этими двумя элементами, в HTML5 была добавлена поддержка для элемента embed. И теперь мы имеем два очень похожих элемента.
Хотя элементы object и embed, как правило, используется для плагинов, они также могут быть использованы для вставки содержания, с которым браузер может работать напрямую, например, изображений. Я покажу вам, почему это может быть полезно, далее в этом разделе.
Использование элемента embed
Я начну с элемента embed, который описан в таблице 15-9.
Таблица 15-9: Элемент embed| Элемент | embed |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовый контент |
| Локальные атрибуты | src, type, height, width |
| Содержание | Нет |
| Стиль тегов | Тег пустого элемента |
| Новый в HTML5 | Да, хотя многие годы он был широко использован неофициально. |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | Нет |
В листинге 15-6 показано, как используется элемент embed. Для этого примера я вставил видео с www.youtube.com, где показан разговор некоторых сотрудников Google про HTML5.
Листинг 15-6: Использование элемента embed<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<embed src="http://www.youtube.com/v/qzA60hHca9s?version=3"
type="application/x-shockwave-flash" width="560" height="349"
allowfullscreen="true" />
</body>
</html>
Атрибут src определяет местоположение контента, а атрибут type указывает его MIME тип, таким образом, браузер знает, что с ним делать. Атрибуты width и height определяют размер, который встроенный контент будет занимать на экране. Любые другие атрибуты, которые вы применяете, считаются параметрами для плагина или содержания. В данном случае я применил атрибут allowfullscreen, который используется видео плеером YouTube для включения полноэкранного режима просмотра. Вы можете увидеть, как браузер обрабатывает этот контент, на рисунке 15-6.
Рисунок 15-6: Вставка видео с YouTube
Использование элементов object и param
При помощи элемента object достигается тот же результат, что и с элементом embed, но он работает немного по-другому и имеет дополнительные функциональные возможности. В таблице 15-10 представлен элемент object.
Таблица 15-10: Элемент object| Элемент | object |
| Тип элемента | Этот элемент считается фразовым, если он содержит фразовый контент, и потоковым, если потоковый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовый или потоковый контент |
| Локальные атрибуты | data, type, height, width, usemap, name, form |
| Содержание | Ноль или более элементов param, также опционально фразовый или потоковый контент, который используется в качестве резервного. Далее в этом разделе представлен пример. |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | В HTML5 появился новый атрибут form. Устарели атрибуты archive, classid, code, codebase, codetype, declare, standby, align, hspace, vspace и border |
| Соглашение по стилям | Нет |
В листинге 15-7 показано, как можно использовать элемент object, чтобы вставить то же самое видео с YouTube, как в предыдущем примере.
Листинг 15-7: Использование элементовobjectиparam
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<object width="560" height="349"
data="http://www.youtube.com/v/qzA60hHca9s?version=3"
type="application/x-shockwave-flash">
<param name="allowFullScreen" value="true" />
</object>
</body>
</html>Атрибут data определяет местоположение контента, а атрибуты type, width и height имеют тот же смысл, что и для элемента embed. Вы задаете параметры, которые будут переданы плагину, используя элемент param. Для каждого параметра, который необходимо определить, применяется один элемент param. Этот элемент представлен в таблице 15-11. Атрибуты name и value определяют имя и значение параметра.
Таблица 15-11: Элемент param| Элемент | param |
| Тип элемента | N/A |
| Разрешенные родительские элементы | Элемент object |
| Локальные атрибуты | name, value |
| Содержание | Нет |
| Стиль тегов | Тег пустого элемента |
| Новый в HTML5 | Нет |
| Изменения в HTML5 | Нет |
| Соглашение по стилям | param { display: none; } |
Указание резервного контента
Одно из преимуществ элемента object заключается в том, что вы можете вставить некое содержание, которое будет отображаться в том случае, если указанный вами контент не доступен. В листинге 15-8 представлен простой пример этого.
Листинг 15-8: Вставка резервного контента при помощи элемента object<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<object width="560" height="349" data="http://titan/myimaginaryfile">
<param name="allowFullScreen" value="true" />
<b>Sorry!</b> We can't display this content
</object>
</body>
</html>
В этом примере я использовал атрибут data для ссылки на файл, который не существует. Браузер будет пытаться загрузить этот несуществующий контент, и когда это ему не удастся, он отобразит содержимое, находящееся внутри элемента object. Как показано на рисунке 15-7, элементы param игнорируются, а отображается только фразовый или потоковый контент.
Рисунок 15-7: Резервный контент, находящийся в элементе object
Обратите внимание, что я удалил из листинга атрибут type. При отсутствии атрибута type браузер сам пытается определить тип контента по данным. Для некоторых комбинаций браузеров и плагинов плагин все равно будет загружен, даже если данные недоступны. Это означает, что на экране будет показана пустая область, а резервное содержимое не будет использоваться.
