Flex 2, 3, 4 & Co: SWFObject 2.0 или правильное внедрение Flash на HTML страницу

Скоро выйдет сие чудо второй версии (пока можно скачать третью бету). А покамест я решил перевести статью-документацию по его использованию. Говорят, скоро это будет стандартом Adobe. Кого ломает читать на блоггере (длинные строки кода обрезаются), могут зайти на народ

Как внедрить 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?

Нет.

8 комментариев:

Анонимный комментирует...: 
<object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">

Опечатка.
надо embed =); 7:18 AM
Andrey Gorbatov комментирует...: все правильно.
http://www.alistapart.com/articles/flashembedcagematch/; 11:55 AM
Unknown комментирует...: в FF 2.0.0.7 не работают процентные ширина и высота :(; 1:37 PM
Andrey Gorbatov комментирует...: баги лучше в комменты к статье писать
http://code.google.com/p/swfobject/wiki/SWFObject_2_0_documentation; 5:08 PM
Unknown комментирует...: ok; 4:52 PM
Анонимный комментирует...: ogcwntnpbamv; 4:37 AM
Анонимный комментирует...: [url=http://pittsburghmom.com/members/Pokimon2010/default.aspx/][img]http://i048.radikal.ru/0910/57/9a759e833d4a.jpg[/img][/url]

10602 movies of premium DVD property

We secure thousands of the hottest movies you've been waiting to ready for! And they're stylish available in Hi-Def!
These movies are playable on most viewing devices including iPod, PDA (HandHelds), PC, DVD & DivX players.
There are absolutely no limits. Download as much as you penury with incredibly high speeds. No additional software is required!
Simply click on a link, download a flicks and superintend it on your favorite player.

[size=4][url=http://pittsburghmom.com/members/Pokimon2010/default.aspx]Sign Up[/url] today and forget about buying or renting DVDs offline. [/size]

[url=http://movies.aoaoaxxx.ru/][img]http://i038.radikal.ru/0910/6d/1c3f50e4ddf0.jpg[/img][/url]

[url=http://pittsburghmom.com/members/Pokimon2010/default.aspx][b]TOP 40 BEST Movies:[/b][/url]
4: Rise of the Silver Surfer
Stand by Me
Michael Clayton
Deep Rising
Julius Caesar
Knowing
Pride & Prejudice
Rising Damp
Love Song for Bobby Long, A
Austin Powers in Goldmember
Nightmare Detective
Batman Forever
Dismal
Exit Wounds
Curious George 2: Follow That Monkey
Cherry Falls
Cactus
Sweet November
Live Animals
Bonnie and Clyde
Goonies, The
Marple: The Body in the Library
Italian Job, The
Another 48 Hrs.
License to Wed
Infamous
Stewart Lee: 90s Comedian
Merlin and the Book of Beasts
Death Race
Fish Called Wanda, A

[url=http://forum.fscp.org/members/abdulvahabsko.aspx]Poltergeist [/url]
[url=http://mauiview.com/upperbay/members/sajfuddinpamfi.aspx]Blink [/url]
[url=http://novinewcomers.com/members/nimaatgaveshin4.aspx]Music Within [/url]
[url=http://antonietasofia.com/members/pantelejmonste.aspx]Dragonquest [/url]
[url=http://navaly.org/members/klimperehodov7.aspx]Rise of the Gargoyles [/url]
[url=http://forums.pmy.myclassifiedsite.com/members/valerijaosiik60.aspx]High Crimes [/url]
[url=http://blogs.mynd.ath.cx/members/kornejvernachev.aspx]G.I. Joe: The Rise of Cobra [/url]
[url=http://skinnerfamily.biz/members/kassianshelkovi.aspx]La bomba [/url]
[url=http://www.netknowledgenow.com/members/stefanefremenk.aspx]Good Luck Chuck [/url]
[url=http://ishug.is/members/nuzartimoshenko.aspx]Around the World in 80 Days [/url]; 2:54 AM
Анонимный комментирует...: анализ разработки разработка сайтов http://web-miheeff.ru анализ разработки; 10:00 PM

Отправить комментарий

Flex 2, 3, 4 & Co

среда, октября 10, 2007

SWFObject 2.0 или правильное внедрение Flash на HTML страницу

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

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

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

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

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

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

ШАГ 3: Конфигурация Flash контента через библиотеку SWFObject

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

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

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

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

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

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

Конфигурация Flash контента

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

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

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

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

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

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

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

8 комментариев:

Архив блога

Блог-ролл