Главная страница   /   15.3. Вставка контента при помощи плагинов (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

15.3. Вставка контента при помощи плагинов

Элементы 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 браузер сам пытается определить тип контента по данным. Для некоторых комбинаций браузеров и плагинов плагин все равно будет загружен, даже если данные недоступны. Это означает, что на экране будет показана пустая область, а резервное содержимое не будет использоваться.