Как внедрить Flash контент с помощью SWFObject 2

Как внедрить Flash контент с помощью совместимой со стандартами html-разметки? (1 способ)

ШАГ 1: Внедрение Flash контента и альтернативного контента с помощью совместимой со стандартами html-разметки

SWFObject использует в качестве разметки метод вложенных тегов object с условными комментариями, поддерживаемыми Internet Explorer [http://www.alistapart.com/articles/flashembedcagematch/] , чтобы обеспечить наиболее оптимальную кросс-браузерную поддержку, совместимость со стандартами и наличие альтернативного контента [http://www.swffix.org/testsuite/]:

<!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 v2.0 - 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>

Заметка 1: Метод вложенных тегов object требует двойное их определение(внешний тег для Internet Explorer и внутренний для остальных браузеров), таким образом задавать все атрибуты и параметры необходимо дважды.

Заметка 2: Атрибуты id, classid, элемент param с movie используются для внешнего object. Атрибуты type и data используются только для внутреннего.

Заметка 3: Мы не рекомендуем использовать атрибут codebase для задания пути к установщику Flash плагина с серверов Adobe, потому что это запрещено согласно спецификации, которая ограничивает его доступ доменом текущего документа. Вместо этого мы предлагаем использовать альтернативный контент с сообщением о возможности загрузки плагина и соответствующей ссылкой.

Как можно использовать HTML для конфиграции Flash контента?

Можно задать следующие атрибуты [http://www.w3schools.com/tags/tag_object.asp] элементу object:

id
name
class
align

Можно задать следующие элементы param [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701]:

play
loop
menu
quality
scale
salign
wmode
bgcolor
base
swliveconnect
flashvars
devicefont [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_13331]
allowscriptaccess [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16494]
seamlesstabbing [http://www.adobe.com/support/documentation/en/flashplayer/7/releasenotes.html]
allowfullscreen [http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html]
allownetworking [http://livedocs.adobe.com/flash/9.0/main/00001079.html]

Почему необходимо использовать альтернативный контент?

Элемент object позволяет размещать альтернатиный контент, который будет показан, если Flash плеер не установлен или не поддерживается. Этот контент также виден для поисковых машин, что немаловажно для SEO.

Недостатки использования метода вложенных объектов?

При более тщательном рассмотрении кросс-браузерности приведенной выше разметки, вы увидите следующие проблемы:

Safari 1.2.2 и ниже игнорирует все вложенныеэлемены param
Internet Explorer 6+ под Windows XP SP2+ и Opera 9+ будут использовать механизм активации Flash контента по клику.
Присутствует риск некорректного отображения (или неотображения вовсе) Flash контента в плеере версии ниже необходимой

Библиотека SWFObject старается решить эти проблемы.

ШАГ 2: Внедрение библиотеки SWFObject в HTML страницу

Библиотека SWFObject состоит из внешнего JavaScript файла (размер: 9.8Kb, GZIPed: 3.3Kb).

<!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 v2.0 - 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 контента через библиотеку SWFObject

Сначала необходимо задайть уникальный id внешнего тегу object. Затем добавьте метод swfobject.registerObject:

Первый аргумент (String, необходим) - это id объекта, заданный ранее.
Второй аргумент (String, необходим) определяет версию Flash плеера, под которую опубликован ваш ролик. SWFObject смотрит только на первые три цифры версии, например, "9.0.18".
Третий аргумент (String, опциональный) может быть использован для активации экспресс-установки плеера [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75] и задает адрес swf-файла экспресс-установки. Данный файл включен в библиотеку SWFObject.

<!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 v2.0 - 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>

Как внедрить несколько SWF файлов с помощью первого способа?

Просто повторите шаги 1 и 3 предыдущего радела.

Как ссылаться на активный элемент object с помощью JavaScript (используя первый способ)?

Одним из сторонних эффектов использования метода вложенных объектов является то, что на один SWF существуют два элемента object, но задавать можно только один уникальный атрибут id или name.

Разные браузеры указывают на разные элементы object:

Internet Explorer на Windows видит только внешний object, так как внутренний закоментирован для него.
Opera и Safari поддерживают нотацию внутреннего object [http://www.swffix.org/testsuite/], ряд: object ActiveX)
Firefox, Mozilla and all other Gecko based browsers use the inner object

На активный объект можно сослаться через:

Атрибут id или name внешнего тега
С помощью следующего javascript-кода:

var obj = document.getElementById("myId");
var nestedObj = obj.getElementsByTagName("object")[0];
var ref = false;
if (obj) {
  if (!nestedObj || (nestedObj && typeof obj.SetVariable != "undefined")) {
    ref = obj;
  }
  else if (typeof nestedObj.SetVariable != "undefined") {
    ref = nestedObj;
  }
}
if (ref) {
  ref.doSomething(); // например, вызов external interface
}

Как с помощью SWFObject динамически внедрять Flash контент? (втоой способ)

ШАГ 1: Создание алтернативного контента с помощью стандартной html-разметки

Метод динамического внедрения следует принципу постепенного улучшения[http://www.adobe.com/devnet/flash/articles/progressive_enhancement.html] и замещает альтернативный HTML контент Flash контентов, если JavaScript и Flash плагины поддержтваются. Сперва создайте альтернативный контент с уникальным 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 v2.0 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>

ШАГ 2: Внедрение библиотеки SWFObject в HTML страницу

Библиотека SWFObject состоит из внешнего JavaScript файла (размер: 9.8Kb, GZIPed: 3.3Kb).

<!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 v2.0 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>

ШАГ 3: Внедрение SWF с помощью JavaScript

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) has five required and four optional arguments:

swfUrl (String, необходим) - URL SWF файла
id (String, необходим) - id HTML элемента, содержащего альтернативный контент, который будет замещен Flash контентом
width (String, необходим) - ширина SWF файла
height (String, необходим) - высота SWF файла
version (String, необходим) - версия публикации SWF файла
expressInstallSwfurl (String, опцианален) - адрес файла экспресс-установки необходимой версии [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75]
flashvars (Object, опцианален) - переменные flashvars в виде name:value пар
params (Object, опцианален) - параметры вложенного элемента object в виде name:value пар
attributes (Object, опцианален) - атрибуты object в виде name:value пар

<!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 v2.0 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 контента?

Можно задать следующие атрибуты [http://www.w3schools.com/tags/tag_object.asp] элементу object:

id
name
class
align

Можно задать следующие элементы param [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701]:

play
loop
menu
quality
scale
salign
wmode
bgcolor
base
swliveconnect
flashvars
devicefont [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_13331]
allowscriptaccess [http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16494]
seamlesstabbing [http://www.adobe.com/support/documentation/en/flashplayer/7/releasenotes.html]
allowfullscreen [http://www.adobe.com/devnet/flashplayer/articles/full_screen_mode.html]
allownetworking [http://livedocs.adobe.com/flash/9.0/main/00001079.html]

Как с помощью объектов JavaScript задавать flashvars, params и атрибуты object?

Создаем соответствующие объекты:

<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>

Добавляем пары name:value:

<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>

Если вы не хотите использовать аргумент задайте ему значение 'null' или сотавьте пустой объект:

<script type="text/javascript">

var flashvars = null;
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 можно задать внутри params:

<script type="text/javascript">

var flashvars = null;
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>

Как внедрить несколько SWF файлов с помощью второго способа?

Просто повторите шаги 1 и 3 предыдущего радела.

Как с помощью SWFObject получить информацию о Flash плеере через JavaScript?

swfobject.getFlashPlayerVersion() - возвращает JavaScript объект, содержащий версию (major:Number), (minor:Number), (release:Number) установленного плеера:

var playerVersion = swfobject.getFlashPlayerVersion();
var majorVersion = playerVersion.major;

swfobject.hasFlashPlayerVersion(versionNumbersString) - возвращает Boolean, показывающий установлена или нет сооветствующая версия:

if (swfobject.hasFlashPlayerVersion("9.0.18")) {
  // есть
}
else {
  // нет
}

Риски использования SWFObject?

Первый способ

Пользователи, у которых выключен или не поддерживается в браузерах JavaScript, увидят некорректное отображение или ничего не увидят вообще. Подсчитаем убытки:

4% всех пользователей не дружат с JavaScript [ http://www.thecounter.com/stats/2007/June/javas.php].

Второй способ

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

4% всех пользователей не дружат с JavaScript [http://www.thecounter.com/stats/2007/June/javas.php].

Поддерживает ли SWFObject MIME тип application/xhtml+xml?

Нет.