Flash больше не поддерживается, поскольку Adobe прекратила его развитие в 2020 году. Из-за этого уязвимостей Flash больше не исправляют, что создаёт серьёзные риски безопасности. К тому же, большинство браузеров уже не поддерживают Flash, что делает его непрактичным для веб-разработки.
Вопрос о внедрении Flash с помощью разметки соответствующей стандартам возникает достаточно часто, между тем у этой проблемы есть достаточно известное решение — SWFObject. SWFObject 2 не только позволяет внедрять Flash динамически, с помощью JavaScript, но и статически, когда для внедрения используется стандартная разметка, а JavaScript только исправляет неразрешимые с помощью разметки проблемы, при этом даже если JavaScript отключен пользователи все равно увидят Flash.
Статья содержит множество примеров, которые я решил не втискивать в ширину сайта, поскольку это существенно усложняет их восприятие. В IE6 как и ожидалось сайт немного перекосило, но, мне кажется, это меньшее зло, да и разработчиков использующих IE6 не много.
Скачать библиотеку и получить дополнительную информацию можно на странице проекта SWFObject в Google Code.
SWFObject 2:
Подробное обоснование необходимости использования SWFObject 2 вы можете найти в статье Flash Embedding Cage Match опубликованной на A List Apart.
SWFObject 2 использует JavaScript преимущественно для преодоления проблем, непреодолимых с помощью разметки:
SWFObject 2 позволяет внедрять Flash двумя различными методами:
Преимущества статического метода публикации:
Преимущества динамического метода публикации:
SWFObject
SWFObject использует метод вложенных объектов (с условными комментариями для Internet Explorer)[http://www.alistapart.com/articles/flashembedcagematch/] это оптимальная кроссбраузерная разметка, соответствующая стандартам и позволяющая задать альтернативный контент:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject - step 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
Примечание: Метод вложенных объектов требует дублирования объявления object
(внешний object
предназначен для Internet Explorer а внутренний object
для остальных браузеров), поэтому если вам нужно определить атрибуты или param для object
то их нужно продублировать для внешнего и внутреннего объектов.
Обязательные атрибуты:
classid
(только для внешнего object
, значение всегда clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
)
type
(только для внутреннего object
, значение всегда application/x-shockwave-flash
)
data
(только для внутреннего object
, определяет URL SWF файла)
width
(для обоих элементов object
, определяет ширину SWF)
height
(для обоих элементов object
, определяет высоту SWF)
Обязательные элементы param
:
movie
(только для внешнего элемента object
, определяет URL SWF файла)
Примечание: Мы рекомендуем не использовать атрибут codebase для указания URL установки Flash с серверов Adobe, поскольку это противоречит спецификации которая ограничивает доступ доменом текущего документа. Вместо этого используйте альтернативный контент с сообщением, что пользователь может получить полную версию установив Flash плагин.
Как использовать HTML для конфигурирования Flash контента?
Вы можете использовать опциональные атрибуты элемента object
:
id
name
class
align
Вы можете использовать специфичные для Flash элементы param
:
play
loop
menu
quality
scale
salign
wmode
bgcolor
base
swliveconnect
flashvars
Элемент object
может содержать альтернативный контент который будет отображен если Flash плеер не установлен или не поддерживается. Альтернативный контент доступен поисковикам, поэтому он может быть хорошим инструментом при оптимизации сайта для поисковиков. Альтернативный контент нужен если вы хотите сделать сайт доступным для пользователей не использующий плагины, хорошо индексируемый поисковиками и ненавязчиво показывающий пользователям, что они могут увидеть его во всей красе если установят Flash плагин.
Библиотека SWFObject состоит из одного внешнего JavaScript файла. Код SWFObject выполняется сразу после его загрузки, манипуляции с DOM выполняются после загрузки DOM, в браузерах которые это поддерживают, таких как IE, Firefox, Safari и Opera 9+ или по onload в остальных случаях:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject - step 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
Шаг 3: Зарегистрируйте ваш Flash контент и задайте параметры
Для начала добавьте уникальный id внешнему элементу object определяющему Flash контент, потом нужно вызвать метод swfobject.registerObject
со следующими аргументами:
major.minor.release.build
, SWFObject работает только с первыми 3 числами, поэтому и WIN 9,0,18,0
(IE) и Shockwave Flash 9 r18
(все остальные браузеры) будет преобразовано в 9.0.18
.expressInstall.swf
. Кроме того есть соответствующие expressInstall.fla
и AS файлы (в директории SRC) на случай если вам нужно будет модифицировать имеющийся или создать свой express install
. Обратите внимание, что express install
срабатывает только один раз (при первом исполнение), требует Flash плеер версии 6.0.65
или старшей на Win или Mac платформах, минимально возможный размер SWF для его работы 310x137px
.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
<param name="movie" value="myContent.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
JavaScript API: swfobject.getObjectById(objectIdStr)
Динамический метод публикации следует принципам прогрессивного улучшения progressive enhancement и заменяет альтернативный HTML контент на Flash контент в случае если есть достаточная поддержка JavaScript и Flash. При использовании динамического метода публикации нужно создать HTML контейнер с альтернативным контентом и задать для него id:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject dynamic embed - step 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>
Библиотека SWFObject состоит из одного внешнего JavaScript файла. Код SWFObject выполняется сразу после его загрузки файла, манипуляции с DOM выполняются после загрузки DOM, в браузерах которые это поддерживают, таких как IE, Firefox, Safari и Opera 9+ или по onload в остальных случаях:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject dynamic embed - step 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>
swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes)
у данного метода пять обязательных и четыре опциональных параметра:swfUrl
(Строка, обязательный) URL SWF файлаid
(Строка, обязательный) id HTML элемента (содержащего альтернативный контент) который должен быть заменен на Flash контентwidth
(Строка, обязательный) ширина SWFheight
(Строка, обязательный) высота SWFversion
(Строка, обязательный) версия Flash плеера необходимого для данного SWF (формат: major.minor.release
)expressInstallSwfurl
(Строка, опциональный) задает URL вашего express install SWF и активирует Adobe express install. Обратите внимание, что express install срабатывает только один раз (при первом исполнении), требует Flash плеер версии 6.0.65
или старшей на Win или Mac платформах, минимально возможный размер SWF для его работы 310x137px
.flashvars
(Строка, опциональный) переменные передаваемые Flash в виде пар имя:значениеparams
(Строка, опциональный) элементы params вложенные в object
в виде пар имя:значениеattributes
(Строка, опциональный) атрибуты элемента object
в виде пар имя:значение
Примечание: Вы можете опустить опциональные параметры при условии, что это не изменит порядок параметров. Если вы не хотите использовать опциональный параметр, но хотите использовать параметр следующий за ним, просто задайте для него значение false
. Параметры flashvars
, params и attributes
являются JavaScript объектами, их можно пропустить не только вышеуказанным методом, но и передав пустой объект: {}
.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>SWFObject dynamic embed - step 3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>
</head>
<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>
</html>
Конфигурирование Flash контента
Вы можете использовать опциональные атрибуты элемента object
:
id
(Если id
не определен элемент object автоматически наследует id
контейнера с альтернативным контентом)
name
styleclass
(используется вместо class, поскольку это ключевое слово в ECMA4
)
align
Вы можете использовать специфичные для Flash элементы param
:
play
loop
menu
quality
scale
salign
wmode
bgcolor
base
swliveconnect
flashvars
devicefont
allowscriptaccess
и kb402975
seamlesstabbing
allowfullscreen
allownetworking
Вы можете создать JavaScript объекты используя объектный литерал:
<script type="text/javascript">
var flashvars = {};
var params = {};
var attributes = {};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
"expressInstall.swf", flashvars, params, attributes);
</script>
Пары имя:значение можно добавить при создании объекта (примечание: не ставьте запятую после последней пары имя:значение):
<script type="text/javascript">
var flashvars = {
name1: "hello",
name2: "world",
name3: "foobar"
};
var params = {
menu: "false"
};
var attributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
"expressInstall.swf", flashvars, params, attributes);
</script>
Или после него:
<script type="text/javascript">
var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";
var params = {};
params.menu = "false";
var attributes = {};
attributes.id = "myDynamicContent";
attributes.name = "myDynamicContent";
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
"expressInstall.swf", flashvars, params, attributes);
</script>
В одну строку это можно записать так:
<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
"expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"},
{menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});
</script>
Если вы не хотите использовать опциональный аргумент можно передать false
или пустой объект (Примечание: для SWFObject 2.1
можно будет использовать еще и null
или 0
):
<script type="text/javascript">
var flashvars = false;
var params = {};
var attributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
"expressInstall.swf", flashvars, params, attributes);
</script>
Объект flashvars
предназначен для упрощения работы с переменными передаваемыми в Flash при желании вы можете игнорировать ее и передавать flashvars
через объект params:
<script type="text/javascript">
var flashvars = false;
var params = {
menu: "false",
flashvars: "name1=hello&name2=world&name3=foobar"
};
var attributes = {
id: "myDynamicContent",
name: "myDynamicContent"
};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
"expressInstall.swf", flashvars, params, attributes);
</script>
Советы
setcontainercss
отсутствует в SWFObject 2, похожий функционал обеспечивает SWFObject JavaScript API: swfobject.createCSS(selStr, declStr)
SWFObject 2 НЕ поддерживает XML MIME
типы, это сознательное решение.
Есть несколько причин почему мы не поддерживаем их: