Внедрение Flash при помощи SWFObject 2

Среда, 26 января 2011 00:58

SWFObject - соответствующий стандартам и легкий в использовании способ внедрения Flash, использующий один небольшой JavaScript-файл.

Скачать библиотеку и получить дополнительную информацию можно на странице проекта SWFObject в Google Code.

Что такое SWFObject?

SWFObject 2:

Предоставляет два оптимизированных метода внедрения Flash: основанный на разметке и использующий JavaScript
Предоставляет JavaScript API со всеми возможностями необходимыми для внедрения SWF файлов и получения информации о Flash плеере.
Использует один небольшой JavaScript файл (10Кб / GZIPed: 3.9Kb)
Является преемником SWFObject 1,5, UFO и Adobe Flash Player Detection Kit
Объединяет все существующие методы внедрения Flash и обеспечивает новый стандарт внедрения Flash.

Итак: SWFObject 2 не только позволяет внедрять Flash динамически, с помощью JavaScript, но и статически, когда для внедрения используется стандартная HTML разметка, а JavaScript только исправляет неразрешимые с помощью разметки проблемы, при этом даже если JavaScript отключен пользователи все равно увидят Flash.

Почему следует использовать SWFObject?

Наиболее оптимизированный и гибкий по сравнению с другими методами внедрения Flash плеера.
Это универсальное решение для всех: будь вы HTML, Flash или JavaScript разработчик, это решение подходит для всех.
Прекращает затянувшееся использование специфичной разметки, зависимой от разработчиков конкретного браузера и позволяет использовать стандартную разметку и альтернативный контент.
Использует ненавязчивый JavaScript.
Прост в использовании.

Более подробное обоснование необходимости использования SWFObject 2 вы можете найти в статье Flash Embedding Cage Match опубликованной на A List Apart.

Почему SWFObject использует JavaScript?

В первую очередь SWFObject 2 использует JavaScript для решения проблем, непреодолимых при помощи одной разметки:

Определяет версию Flash-плеера и в зависимости от результата отображает Flash либо альтернативный контент, чем предотвращает искажение Flash в плеерах устаревших версий.
Позволяет вернуться к альтернативному контенту с помощью манипуляций DOM в случае, если используется устаревший плагин Flash (примечание: если Flash плагин не установлен то вместо элемента object автоматически отображается вложенный альтернативный контент).
Позволяет использовать Adobe Express Install для установки последней версии Flash плеера
Предоставляет интерфейс JavaScript API для выполнения распространенных действий с Flash плеером и Flash контентом.

Какой из методов публикации предпочтительнее, статический или динамический?

SWFObject 2 позволяет внедрять Flash двумя различными методами:

1. При статическом методе публикации Flash и альтернативный контент внедряются с помощью стандартной разметки, а JavaScript используется для решения проблем непреодолимых с помощью разметки.
2. Динамический метод публикации основан на замене альтернативного контента Flash контентом в случае если у пользователя установлена достаточно новая версия Flash плеера и поддержка JavaScript. (аналогично как и предыдущей версии SWFObject и UFO)

Преимущества статического метода публикации:

1. Используется стандартная разметка.
2. Большая производительность этого метода внедрения.
3. Механизм внедрения Flash контента не зависит от JavaScript благодаря чему Flash будет доступен значительно большей аудитории:

Если у вас установлен Flash плагин, но отключен JavaScript, либо Ваш браузер не поддерживает JavaScript, вы все равно увидите Flash контент.
Flash будет отображен на устройствах со слабой поддержкой JavaScript, например Sony PSP
Приложения вроде RSS ридеров смогут отобразить Flash

Преимущества динамического метода публикации:

1. Хорошо интегрируется с серверными скриптами (php, perl и т.д.) позволяя использовать динамические данные (flashvars).
2. Позволяет обойти механизмы активации активного контента в Internet Explorer 6/7 и Opera 9+. Обратите внимание, что Microsoft прекратила использование этого механизма в браузерах Internet Explorer

Статический метод публикации Flash с помощью SWFObject

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

SWFObject использует метод вложенных объектов (с условными комментариями для Internet Explorer) (http://www.alistapart.com/articles/flashembedcagematch) documentation это оптимальная кроссбраузерная разметка, соответствующая стандартам и позволяющая задать альтернативный контент. (http://www.bobbyvandersluis.com/flashembed/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 - 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 для остальных браузеров), поэтому если вам нужно определить атрибуты или необходимые параметры для 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
devicefont (подробнее)
allowscriptaccess (подробнее и тут )
seamlesstabbing (подробнее)
allowfullscreen (подробнее)
allownetworking (подробнее)

Зачем нужен альтернативный контент?

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

Шаг 2: Подключение библиотеки SWFObject

Библиотека 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 контент в библиотеке SWFObject и настройте параметры

Для начала добавьте уникальный id внешнему элементу object определяющему Flash контент, потом нужно вызвать метод swfobject.registerObject со следующими аргументами:

1. Первый аргумент (Строка, обязательный) id используемый в разметке.
2. Второй аргумент (Строка, обязательный) необходимая версия Flash плеера. Если установлена более старая версия Flash плеера, SWFObject принудительно отобразит альтернативный контент используя манипуляции DOM). Номер версии Flash плеера обычно содержит четыре элемента major.minor.release.build, SWFObject работает только с первыми 3 числами, поэтому и "WIN 9,0,18,0" (IE) и "Shockwave Flash 9 r18" (все остальные браузеры) будут преобразовано в "9.0.18". Если Вы хотите проверить только основной номер (major), то можно опустить minor и release. Например указать "9" вместо "9.0.0".
3. Третий аргумент (Строка, не обязательный) используется для активации Adobe express install и должен указывать на URL вашего express install SWF файла. Express install отображает стандартный диалог загрузки Flash плагина вместо Flash контента, если требуемая версия плагина не установлена. В архиве проекта уже есть готовый expressInstall.swf. Кроме того он содержит соответствующие expressInstall.fla и AS файлы (в директории SRC) на случай если вам нужно будет модифицировать имеющийся или создать свой express install. Обратите внимание, что express install срабатывает только один раз (при первом обращении), требует Flash плеер версии 6.0.65 или более старшей версии для Win или Mac платформ, минимально возможный размер SWF для его работы 310x137px.
4. Четвертый аргумент (функция JavaScript, не обязательный) используется для определения callback функции, вызываемой как в случае успешного, так и неуспешного внедрения SWF файла (см. документацию по API)

<!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.115", "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>

Советы

Используйте SWFObject HTML и JavaScript генератор для автоматического создания кода
Чтобы вставить несколько SWF на одной странице просто повторите шаги 1 и 3
Простейший способ получать ссылку на активный элемент object — это использовать JavaScript API: swfobject.getObjectById(objectIdStr)

Динамический метод публикации с помощью SWFObject

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

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

Шаг 2: Подключение библиотеки SWFObject

Библиотека 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>

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

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) у данного метода пять обязательных и пять опциональных параметра:

1. swfUrl (Строка, обязательный) URL SWF файла
2. id (Строка, обязательный) id HTML элемента (содержащего альтернативный контент) который должен быть заменен на Flash.
3. width (Строка, обязательный) ширина SWF
4. height (Строка, обязательный) высота SWF
5. version (Строка, обязательный) версия Flash плеера необходимого для данного SWF (формат: "major.minor.release" или "major")
6. expressInstallSwfurl (Строка, не обязательный) задает URL вашего express install SWF и активирует Adobe express install. Обратите внимание, что express install срабатывает только один раз (при первом обращении), требует Flash плеер версии 6.0.65 или выше для Win или Mac платформ, минимально возможный размер SWF для его работы 310x137px.
7. flashvars (Строка, не обязательный) переменные передаваемые Flash в виде пар имя:значение
8. params (Строка, не обязательный) элементы params вложенные в object в виде пар имя:значение
9. attributes (Строка, не обязательный) атрибуты элемента object в виде пар имя:значение
10. callbackFn (функция JavaScript, не обязательный) используется для определения callback функции, вызываемой как в случае успешного, так и неуспешного внедрения SWF файла (см. документацию по API)

Примечание: Вы можете опустить необязательные параметры, не изменяя порядок параметров. Если вы не хотите использовать опциональный параметр, но хотите использовать параметр следующий за ним, просто задайте для него значение 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 (подробнее и тут )
seamlesstabbing (подробнее)
allowfullscreen (подробнее)
allownetworking (подробнее)

Как используя объекты JavaScript установить переменные, параметры и атрибуты?

Лучше всего  создавать объекты 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>

Советы

Используйте SWFObject HTML и JavaScript генератор для автоматического создания кода
Чтобы вставить несколько SWF просто повторите шаги 1 и 3

Переход c SWFObject 1.5 к SWFObject 2

1. В SWFObject 2 НЕТ обратной совместимости с SWFObject 1.5
2. Предпочтительно чтобы весь код JavaScript был в разделе head вашей HTML страницы. Добавление скриптов в тело страницы может вызвать нежелательные визуальные эффекты (например, заметная для пользователя замена альтернативного контента на флеш), поскольку в этом случае код JavaScript выполняется на более позднем этапе.
3. Имя библиотеки теперь в нижнем регистре: swfobject вместо SWFObject
4. Методы доступны только через библиотеку (вместо экземпляра SWFObject в SWFObject 1.5)
5. JavaScript API абсолютно новое и более сложное.
6. SWFObject 2 заменяет указанный HTML блок с альтернативным контентом полностью, включая элемент контейнер, в случае если есть необходимая поддержка Flash и JavaScript, тогда как SWFObject 1.5 заменяет только содержимое указанoго контейнера. Если вы явно не указали атрибут id, элемент object автоматически наследует id указанного HTML контейнера с альтернативным контентом.

Переход от UFO к SWFObject 2

1. SWFObject 2 заменяет указанный HTML блок с альтернативным контентом полностью, включая элемент контейнер, в случае если есть необходимая поддержка Flash и JavaScript, тогда как UFO заменяет только содержимое указанoго контейнера. Если вы явно не указали атрибут id, элемент object автоматически наследует id указанного HTML контейнера с альтернативным контентом.
2. setcontainercss отсутствует в SWFObject 2, похожий функционал обеспечивает SWFObject JavaScript API: swfobject.createCSS(selStr, declStr).

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

SWFObject 2 НЕ поддерживает XML MIME типы, это сознательное решение.

На то есть несколько причин:

их использует очень малая часть веб-разработчиков
Разработчики SWFObject не уверены, что веб пойдет этим путем. Internet Explorer его не поддерживает и все остальные основные производители браузеров больше склоняются к новому стандарту парсинга HTML (в HTML 5), отходя от парсинга HTML как XML, каким его сейчас видит W3C.
отказавшись от поддержки XML MIME типов разработчики уменьшили размер файла и упростили тестирование и поддержку