SWFObject

Материал из AOW

Перейти к: навигация, поиск

Содержание

SWFObject

Статья основана на публикаци Джеффа Стерна (Geoff Stern) @ Adobe Developers Network с согласия автора. Вольный перевод, корректировки и переработка FAQ : Майкл Клишин, www.novemberain.com/blog/

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

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

  • Тип контента при этом подразумевается text/html, не application/xhtml+xml.

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

http://blog.deconcept.com/swfobject/swfobject.js

Пользоваться 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>

Разберем, что же делает код выше:

Создаем HTML элемент div, в котором будет размещаться ролик. Его контент будет замещен Flash роликом, поэтому те, у кого Flash плеер есть, этого контента никогда не увидят. Эта дополнительная возможность играет на руку при оптимизации для поисковиков и может быть использована как альтернативный контент для тех немногих, у кого плеер не установлен. Идем дальше.

Создает новый объект класса 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-методом. Метод прописывает код объекта в тело страницы (если у пользователя установлена необходимая версия плеера, либо проверка принудительно отменена). При этом HTML элемент с указанным ID заменяется.


Подробности

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

[...]
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.write("flashcontent");

пользователя удовлетворяет заявленной, пользователи с младшими версиями плеера и поисковые машины смогут использовать альтернативный контент. 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), код будет таким: Как уже говорилось, возможность определения SWFObject версии плеера у пользователя можно отключить. Для этого просто передайте странице GET-ом переменную 'detectflash' (либо другую, как определили в настройках) со значением false.


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

Этот пример – простейшее применение SWFObject, но что, если вы хотите большего? SWFObject позволяет очень легко добавлять дополнительные параметры. Примеры ниже показывают, как с помощью SWFObject можно добавлять дополнительные параметры. Простой пример добавления дополнительных параметров: Полный список параметров и допустимых значений для Flash-объектов можно найти по адресу [1]. А как же передача параметров с помощью Flashvars? Использование Flashvars -- возможно, самый простой способ передать данные из HTML во Flash ролик, однако передача возможно лишь однажды, при инициализации загруженного ролика. Как правило, для этого добавляется параметр "flashvars" со значением вроде этого: variable1=value1&variable2=value2&variable3=value3 и так далее. SWFObject упрощает вам жизнь, превращая добавление переменных в добавление дополнительных параметров. Вот пример передачи переменных с помощью Flashvars:

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");
<a href="mypage.html?detectflash=false">Bypass link</a>
<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>


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

Представим вот такой запрос: http://www.example.com/page.html?variable1=value1&variable2=value2. При помощи функции getQueryParamValue() вы можете легко получить переменную из строки запроса и передать ее во Flash ролик. Вот пример для строки запроса, приведенной выше:

Функция getQueryParamValue() также может работать с location.hash.

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

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

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

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

Важно не добавлять в первый кадр никакого другого содержимого (либо не в первый, а в кадр, где происходит 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.

Где скачать?

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

#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();
}
<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>

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

Если вам нужны примеры применения, посмотрите ссылки ниже:

  • Простая вставка Flash ролика в страницу и передача переменной. Страница

соответствует XHTML 1.0 Strict.* http://blog.deconcept.com/swfobject/swfobject.html

  • Flash ролик, растянутый на 100% по высоте и ширине. Страница соответствует XHTML 1.0 Strict. http://blog.deconcept.com/swfobject/fullpage.html
  • ExpressInstall в действии. Скрипт попытается обновить ваш Flash player, если версия ниже 8 (требует наличия плеера хотя бы 6.0.65) http://blog.deconcept.com/swfobject/expressinstall.html
  • Под страницами понимается text/html, не application/xhtml+xml. Также, возможно вам будет интересно подключиться к мейл-конференции

SWFObject: http://lists.deconcept.com/listinfo.cgi/swfobject-deconcept.com

Почему 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, блондинка Маша скорее всего просто закроет lэтот диалог, перепугавшись злобных вирусов. С другой точки зрения, в этом виновата сама система: она не объясняет пользователю, что и зачем она ставит, достаточно

доступным языком («Маша, ставь, иначе на сайт Fubon не посмотришь!» заменяется на «Производится установка плагина для активного содержимого swf/x-shockwave-app или какототамеще» -- что для Маши определенно слишком).

  • Начиная с 11 апреля 2006 года в силу вступил патент Eolas, засудивших Microsoft, и теперь Flash контент в IE необходимо активировать кликом прежде, чем он станет активен. Первоисточник заявляет вот что: http://blog.deconcept.com/2005/12/15/internet-explorer-eolas-changes-andthe-flash-plugin/
  • Это НЕвалидный HTML и уж тем более XHTML - тэга embed ни в одной из версий HTML или XHTML вы не найдете. Однако, так как тэг object браузеры обрабатывают по-разному (либо игнорируют), тэг embed необходим для подстраховки.

2. Только тэг Object или «Так называемый Flash satay» Метод стал популярным после статьи в легендарном A List Apart в 2002: http://www.alistapart.com/articles/flashsatay/ Вот два примера применения этого самого 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">
<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>
</object>
<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 – проблема состоит в том, что пришедший с поисковика человек, равно как и поисковый кроулер (crawler) будет любоваться на специальную страницу, на которой нет ничего, кроме ролика для детекции. Плохо!

4. «Чистый Javascript» или «Лобовая атака» Этот метод тяжело критиковать, т.к. реализация на каждом ресурсе своя. Однако, большинство основанных на Javascript техник определения Flash имеют следующие косяки:

  • Ненадежный метод определения – код нужно обновлять вручную после

выхода каждой новой версии плеера.

  • Объем кода излишне велик - большое число любителей изобрести велосипед позволяет обнаружить велосипеды с 5 колесами, 2 рулями, 3 педалями, 22 переключателями передач и без цепи вообще.
  • Слишком уж все сложно – много скриптов написаны.
Источник — «http://doc.artofweb.ru/doc/SWFObject»
Личные инструменты

Разработка веб-сайтов, автоматизация.
По всем вопросам обращайтесь по телефонам:

+7 495 640 29 90
http://artofweb.ru