задача: расставить точки в вопросе определения версии флэш плеера у пользователя и в проблеме работы с патчем Internet Explorer, который глушит ActiveX контент.

Рассматривается использование JavaScript-класса SWFObject для определения версии флэш плеера в системе пользователя и для избавления пользователя IE от необходимости несколько раз щелкать мышкой для того, чтобы увидеть флэш-ролик на странице. Также приводится сравнение всех прочих вариантов определения флэш плеера на странице.

Статья основана на публикаци Джеффа Стерна (Geoff Stern) @ Adobe Developers Network с согласия автора.

Вольный перевод, корректировки и переработка FAQ:
Майкл Клишин, www.novemberain.com/blog/.

Доступна также PDF-версия этой статьи.

1. краткий обзор

2. что нового в последней [ на 13.05.2006 ] версии?

3. как работает SWFObject
        3.1 поддержка разными браузерами

4. примеры применения SWFObject

5. совместное использование ExpressInstall и SWFObject

6. где скачать?

7. почему SWFObject лучше аналогов?
        7.1 способ по умолчанию или «положитесь на embed»
        7.2 только тэг object или «так называемый flash satay»
        7.3 классика: ролик, определяющий версию плеера
        7.4 Macromedia Flash Player Detection Kit
        7.5 «чистый JavaScript» или «лобовая атака»

8. FAQ

назад к списку уроков и рецептов


1. SWFObject: JavaScript средство для внедрения в страницу и определения версии Flash Player.

SWFObject — небольшой Javascript файл, встраивающий Flash контент в страницу. Этот же скрипт может определять версию Flash плеера во всех основных браузерах (как на Mac, так и PC) и делался с мыслью максимального упрощения процесса внедрения Flash контента в тело страницы. Он также легко воспринимается поисковиками, может использоваться как в HTML, так и валидных XHTML 1.0 документах*, а также имеет хорошую «прямую совместимость» — проще говоря, будет служить веками без необходимости замены, если только не произойдет браузерной революции.
* Тип контента при этом подразумевается text/html, не application/xhtml+xml.

Внимание! SWFObject ранее был известен как FlashObject. По причине использования слова Flash в названии возникли проблемы с авторскими правами и название было изменено.
в начало

2. Что нового в последней [ на 13.05.2006 ] версии?

  • [Апдейт] SWFObject.write() теперь возвращает true или false в зависимости от того, был ли код SWF ролика выведен в тело страницы (true – если был)
  • [Апдейт] Пакет‘com’ удален, теперь все находится в пакете ‘deconcept’
  • [Изменение] Код несколько изменен для лучшей работы в браузерах от Mozilla.

в начало

3. Как работает SWFObject

Любители фтыкать код могут сразу заняться любимым делом: здесь.

Пользоваться SWFObject легко. Просто включите файл swfobject.js в тело страницы, и сможете внедрять Flash ролики, обходя последний апдейт IE. Вот пример минимально необходимого количества кода для внедрения ролика Flash:
<script type="text/javascript" src="swfobject.js"></script>
                
<div id="flashcontent">
  Этот текст будет заменен флэшкой.
</div>

<script type="text/javascript">
  var so = new SWFObject("movie.swf","mymovie","200","100","7","#336699");
  so.write("flashcontent");
</script>

Разберем, что же делает код выше:
<div id="flashcontent">[...]</div>
Создаем HTML элемент div, в котором будет размещаться ролик. Его контент будет замещен Flash роликом, поэтому те, у кого Flash плеер есть, этого контента никогда не увидят. Эта дополнительная возможность играет на руку при оптимизации для поисковиков и может быть использована как альтернативный контент для тех немногих, у кого плеер не установлен.

Идем дальше:
var so = new SWFObject("movie.swf","mymovie","200","100","7","#336699");
Создает новый объект класса SWFObject и передает ему ряд параметров:
  • swf — путь к свиф файлу.
  • id — ID тэга object или embed. Тэгу embed это значение будет прописано еще и в параметр name, если swliveconnect включен.
  • width — ширина ролика.
  • height — высота ролика.
  • version — версия Flash плеера. Может быть либо строкой в виде 'majorVersion.minorVersion.revision', например, "6.0.65", либо можно просто указать major версию, например, "8".
  • background color — цвет фона объекта.
Необязательными параметрами являются:
  • useExpressInstall — если вы хотите использовать технологию фоновой установки плеера ExpressInstall, укажите значение 'true'.
  • quality — качество отображения ролика. Если не указано, используется "high".
  • xiRedirectUrl — если после установки плеера с помощью ExpressInstall вы хотите сделать редирект, укажите URL как значение этого параметра.
  • redirectUrl — адрес для редиректа пользователей, у которых плеер не установлен.
  • detectKey — имя передаваемой через URL переменной, по значению которой SWFObject определит, необходимо ли проверять наличие плеера. По-умолчанию имеет значение 'detectflash'. Пример: чтобы пропустить определение Flash плеера и просто прописать код Flash ролика на странице, передайте detectflash=false GET-методом.

so.write("flashcontent");
Метод прописывает код объекта в тело страницы (если у пользователя установлена необходимая версия плеера, либо проверка принудительно отменена). При этом HTML элемент с указанным ID заменяется.

Подробности

SWFObject работает фоне. При верстке страницы, где предполагается использовать SWFObject, сначала выполните основную верстку, а затем добавьте Javascript скрипт. Благодаря системе замены объекта только в случае, когда версия плеера у пользователя удовлетворяет заявленной, пользователи с младшими версиями плеера и поисковые машины смогут использовать альтернативный контент.

SWFObject работает со всеми распространенными браузерами.

На PC:
  • IE5/5.5/6
  • Netscape 7/8
  • Firefox
  • Mozilla
  • Opera
На Mac:
  • Safari
  • Firefox
  • IE5.2
  • Netscape 6/7
  • Mozilla
  • Opera 7.5+
SWFObject определяет весию Flash Player начиная с 3 и, так как вывод производится с динамически, «активировать» Flash контент пользователю не нужно.

SWFObject способен определять minor версии и ревизии версии Flash Player, просто передайте версию в строковом виде, указанном выше. Например, если вы хотите установить минимально допустимой для просмотра версию Flash player v.6.0 r65 (или 6,0,65,0), код будет таким:
var so = new SWFObject("movie.swf","mymovie","200","100","6.0.65",
                                                         "#336699");

Как уже говорилось, возможность определения SWFObject версии плеера у пользователя можно отключить. Для этого просто передайте странице GET-ом переменную 'detectflash' (либо другую, как определили в настройках) со значением 'false.' Примерно вот так:
<a href="mypage.html?detectflash=false">Bypass link</a>

в начало

4. Примеры применения SWFObject

Пример, приведенный выше, показывает простейший вариант использования SWFObject. Но как быть, если вы хотите использовать какие-то дополнительные параметры для флэш плагина? SWFObject предлагает очень простой способ добавления любых дополнительных параметров. Примеры, приведенные ниже, показывают разные варианты вставки флэш-ролика в страницу.

Простой пример добавления дополнительных параметров:
<script type="text/javascript">
 var so = new SWFObject("movie.swf","mymovie","200","100%","7","#336699");
 so.addParam("quality", "low");
 so.addParam("wmode", "transparent");
 so.addParam("salign", "t");
 so.write("flashcontent");
</script>

Полный список параметров и допустимых значений для Flash-объектов можно найти по адресу http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_12701.

А как же передача параметров с помощью FlashVars?

Использование FlashVars — возможно, самый простой способ передать данные из HTML во Flash ролик, однако передача возможно лишь однажды, при инициализации загруженного ролика. Как правило, для этого добавляется параметр "flashvars" со значением вроде этого: variable1=value1&variable2=value2&variable3=value3 и так далее. SWFObject упрощает вам жизнь, превращая добавление переменных в добавление дополнительных параметров. Вот пример передачи переменных с помощью FlashVars:
<script type="text/javascript">
 var so = new SWFObject("movie.swf","mymovie","200","100","7","#336699");
 so.addVariable("variable1", "value1");
 so.addVariable("variable2", "value2");
 so.addVariable("variable3", "value3");
 so.write("flashcontent");
</script>
Доступ к ним можно будет получить, обращаясь к _root.

SWFObject также содержит функцию, позволяющую парсить переданные GET-ом переменные.

Представим вот такой запрос:
http://www.example.com/page.html?variable1=value1&variable2=value2.

При помощи функции getQueryParamValue() вы можете легко получить переменную из строки запроса и передать ее во Flash ролик. Вот пример для строки запроса, приведенной выше:
<script type="text/javascript">
 var so = new SWFObject("movie.swf","mymovie","200","100","7","#336699");
 so.addVariable("variable1", getQueryParamValue("variable1"));
 so.addVariable("variable2", getQueryParamValue("variable2"));
 so.write("flashcontent");
</script>
Функция getQueryParamValue() также может работать с location.hash.
в начало

5. Express Install при помощи SWFObject

SWFObject имеет полноценную поддержку такой фичи как Macromedia Flash Player Express Install. В SWFObject входит actionscript файл, который взаимодействует с SWFObject и начинает автоматическое обновление плеера пользователя. Пользователю не придется покидать сайт, чтобы установить или обновить плеер, а по окончанию инсталляции произойдет автоматический редирект на исходную страницу.

Чтобы воспользоваться ExpressInstall, необходимо включить expressinstall.as в первом кадре вашего fla исходника, чтобы убедиться, что пользователю необходимо обновить плеер:
#include "expressinstall.as"

// Инициализируем объект ExpressInstall
var ExpressInstall = new ExpressInstall();

// Если апгрейд необходимо, показываем кнопку 'start upgrade' 
if (ExpressInstall.needsUpdate) {
    // Это необязательно, обновление можно начать вручную при помощи
    // вызова ExpressInstall.init() вместо следующих строк

    // Добавляем произвольный текст, центрируем его
    var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1);
    upgradeMsg._x = Stage.width / 2;
    upgradeMsg._y = Stage.height / 2;

    // Прописываем обработчик события для кнопки, 
    // запускающей ExpresInstall
    upgradeMsg.upgradeBtn.onRelease = function() {
            // Метод ExpressInstall.init() начинает процесс обновления
            ExpressInstall.init();
    }
    // Останавливаем воспроизведение.
    stop();
}
Важно не добавлять в первый кадр никакого другого содержимого (либо не в первый, а в кадр, где происходит ExpressInstall), требующего Flash Player 7 или новее.

Чтобы посмотреть живой пример, откройте файл source/so_tester.fla в архиве с SWFObject. Если же вам хочется увидеть ExpressInstall в действии, установите Flash player 6.0.65, либо более старую версию, и посетите страницу по адресу: http://blog.deconcept.com/swfobject/expressinstall.html.

Если ваш Flash ролик находится в поп-апе, либо если пользователя по окончании ExpressInstall необходимо редиректить на другую страницу, воспользуйтесь аттрибутом xiRedirectUrl:
<script type="text/javascript">
 var so = new SWFObject("movie.swf","mymovie","200","100", 
                                              "8","#336699",true);

 // URL должен быть абсолютным
 so.setAttribute('xiRedirectUrl', 
                 'http://www.example.com/upgradefinished.html');	
 so.write("flashcontent");
</script>

в начало

6. Где скачать?

SWFObject распространяется на условиях MIT License лицензии. Проще говоря это означает, что вы можете использовать его как заблагорассудится без каких бы то ни было ограничений.

Zip файл с SWFObject, включая примеры, указанные выше:
http://blog.deconcept.com/swfobject/swfobject1-4.zip

Если вам нужны примеры применения, посмотрите ссылки ниже: * Тип контента при этом подразумевается text/html, не application/xhtml+xml.

Также, возможно вам будет интересно подключиться к мейл-конференции SWFObject: http://lists.deconcept.com/listinfo.cgi/swfobject-deconcept.com.
в начало

7. Почему SWFObject лучше аналогов

Годы применения Flash технологии принесли массу способов определения версии Flash player . В этом разделе мы рассмотрим самые популярные методики и проблемы, которые возникают (или могут возникнуть) при их применении.

  1. Способ по умолчанию или «Положитесь на embed»

    Ни для кого не секрет, что Flash встраивается в страницу. Встраивается он с помощью Object, с помещением следом тэга Embed для не-IE основанных браузеров. Это наиболее часто встречаемый способ встраивания Flash ролика в страницу, фактически навязываемый нам «расчудесной» Macromedia Flash IDE. Способ хорош тем, что работает железно и везде. Вот пример:

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
      codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
      width="550" height="400" 
      id="Untitled-1" align="middle">
     
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="mymovie.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    
    <embed src="mymovie.swf" quality="high" bgcolor="#ffffff" 
      width="550" height="400" 
      name="mymovie" align="middle" allowScriptAccess="sameDomain" 
      type="application/x-shockwave-flash" 
      pluginspage="http://www.macromedia.com/go/getflashplayer" />
      
    </object>
    
     

    Однако, способ этот не лишен недостатков:
    • Нет никакого способа определения версии плагина — если плагин не установлен, то увидевшая диалог 'ActiveX install' в IE или 'элемент паззла' Firefox, блондинка Маша скорее всего просто закроет этот диалог, перепугавшись злобных вирусов. С другой точки зрения, в этом виновата сама система: она не объясняет пользователю, что и зачем она ставит, достаточно доступным языком («Маша, ставь, иначе на сайт Fubon не посмотришь!» заменяется на «Производится установка плагина для активного содержимого swf/x-shockwave-app или кактотамеще» — что для Маши определенно слишком).
    • Начиная с 11 апреля 2006 года в силу вступил патент Eolas, засудивших Microsoft, и теперь Flash контент в IE необходимо активировать кликом прежде, чем он станет активен. Вот, что заявляется первоисточник.
    • Это НЕвалидный HTML и уж тем более XHTML — тэга embed ни в одной из версий HTML или XHTML вы не найдете. Однако, так как тэг object браузеры обрабатывают по-разному (либо игнорируют), тэг embed необходим для подстраховки.
  2. Только тэг Object или «Так называемый Flash satay»

    Метод стал популярным после статьи в легендарном A List Apart в 2002. Вот два примера применения этого самого Flash satay:

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
      width="300" height="120">
    
    <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
    <param name="quality" value="high">
    <param name="bgcolor" value="#FFFFFF">
    
    <!--[if !IE]> <-->
    <object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
               width="300" height="120" 
               type="application/x-shockwave-flash">
     <param name="quality" value="high">
     <param name="bgcolor" value="#FFFFFF">
     <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
    
     FAIL (the browser should render some flash content, not this).
    
    </object>
    <!--> <![endif]-->
    
     

    <object type="application/x-shockwave-flash
            data="c.swf?path=movie.swf" 
            width="400" height="300">
    
    <param name="movie" value="c.swf?path=movie.swf" />
    
    <img src="noflash.gif" width="200" height="100" alt="" />
    
    </object>
    

    Недостатки такого подхода:
    • Проблемы с Accessibility. Если вы используете Flash Satay, некоторые скринридеры просто проигнорируют ваш контент.
    • После выхода решения суда по делу Eolas контент, вставленный таким образом, сначала придется активировать кликом.
    • Нет никакого способа определения версии плагина. Если плагин не установлен, то пользователи испытают те же проблемы, что и в предыдущем случае.
    • Необходимость в контейнере – порой подобный способ приводит к остановке воспроизведения ролика, приходится обходить это контейнером, что добавляет головной боли, в частности, при работе с FlashVars.
    • Старые версии Safari игнорируют тэг param – до версий 2.0 (Tiger), 1.3 (Panther) и 1.2.8 (pre-релиз Panther) Safari просто игнорирует тэг param. А значит, значения Flashvars, Align, Salign, и т.п. идут к чертовой бабушке.
  3. Классика: ролик, определяющий версию плеера.

    Помещаем на страницу маленький ролик, задача которого — проверить значение переменной $version и редиректить юзера, ежели чего.

    Косяки вот какие:
    • А на внутренних страницах детекции-то нет! Если пользователь кидает ссылку на страницу другу, тот автоматически обходит детекцию на всех страницах, куда не вставили ролик.
    • После выхода решения суда по делу Eolas контент, вставленный таким образом, сначала придется активировать кликом.
    • Это НЕвалидный HTML и уж тем более XHTML — тэга embed ни в одной из версий HTML или XHTML вы не найдете. Однако, так как тэг object браузеры обрабатывают по-разному (либо игнорируют), тэг embed необходим для подстраховки.
    • Плохо сказывается на SEO (Search Engine Optimization) – проблема состоит в том, что пришедший с поисковика человек, равно как и поисковый кроулер (crawler) будет любоваться на специальную страницу, на которой нет ничего, кроме ролика для детекции.
  4. Macromedia Flash Player Detection Kit

    Macromedia отлично поработала над последним, выпущенным с Flash 8, detection kit – но он не идеален. Он предлагает два пути определения версии/наличия Flash plug-in:
    1. Классический: "маленький Flash ролик на главной странице" (см. выше)
    2. JavaScript: да, Flash теперь имеет Javascript-овый темплейт для определения версии. К сожалению, в нем намешаны Javascript, Vbscript, и ваш HTML разом, поэтому разбираться в нем захотят разве что криптографы. Также, ни о какой XHTML или HTML валидности речи не идет. Впрочем, многим на это плевать, а зря.
  5. «Чистый Javascript» или «Лобовая атака»


  6. Этот метод тяжело критиковать, т.к. реализация на каждом ресурсе своя. Однако, большинство основанных на Javascript техник определения Flash имеют следующие косяки:
    • Ненадежный метод определения – код нужно обновлять вручную после выхода каждой новой версии плеера.
    • Объем кода излишне велик – большое число любителей изобрести велосипед позволяет обнаружить велосипеды с 5 колесами, 2 рулями, 3 педалями, 22 переключателями передач и без цепи вообще.
    • Слишком уж все сложно – много скриптов написаны так, что глядя на них думаешь «нихрена себе, что они курят?».

в начало

FAQ

Q. Я слышал о какой-то ботве, кажется, она зовется Internet Explorer Active Content
     Update
, шозахер и позволит ли SWFObject пофиксить эту ботву?

    A. Если коротко, то да, SWFObject ее пофиксит

Q. А почему перед отображением ролика я на мгновенье вижу альтернативный контент? (только в IE под Windows)

    A. Это связано с багом FOUC. Фиксится добавлением тэга link или script в тэг head
        (вставляемый тэг может быть пустым).

Q. Могу ли я с помощью SWFObject внедрить несколько SWF в одну
     HTML страницу
?

    A. Да, каждый html-контейнер, в который будет помещен свиф,
        должен иметь уникальный id.

Q. А как заставить SWFObject работать под Netscape 4.x?

    A. Смотрите пример кода.

Q. А могу я заюзать SWFObject в моем сверхохренопупительском блоге?

    A. Да, существуют плагины для Wordpress и Textpattern.

Q. А могу ли я юзать SWFObject в Dreamweaver или Golive?

    A. Экстенжен к Dreamweaver доступен на CommunityMX.

Q. А паблиш-темплейта для Flash нет?

    A. Есть.

Q. Тут друг Вася спрошает, че вы ваще за пацаны. Кто ваще использует этот
     ваш SWFObject?

    A. Вася, фтыкай:

        The Library of Congress,
        Adobe.com (чуть-чуть измененную версию),
        Windows.com,
        YouTube.com,
        Skype.com,
        Snapple.com,

        а также он включен в Adobe Photoshop (во Flash фотогалерее) и тысячи других
        ресурсов. Легендарный Колин Мук рекомендует его как альтернативу
        Macromedia Detection kit.

Благодарности

Toby Boudreaux помог сделать SWFObject гораздо более качественным продуктом.
в начало
назад к списку уроков и рецептов