Встраиваем флэш-ролики, поддерживая стандарты

Я работаю с Flash’ем уже несколько лет и всегда испытывал легкое
разочарование от того, какой html-код следует писать, чтобы встроить
ролик в веб-страницу. Недавно я создал сайт на XHTML, и мое
разочарование возросло: html-код, необходимый для отображения ролика
на сайте, просто не соответствует стандартам. На помощь был призван
новый, более аккуратный метод, который бы не конфликтовал, а дружил
со стандартами XHTML.

Доверяй, но проверяй

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

Учитывая то, что такой код используется на 95% страниц, он стал стандартом де-факто.

Как нетрудно заметить любому, кто уделил внимание устрашающему
html-коду выше, для отображения роликов используется два главных тэга: <object> и <embed>.

В то время, как Internet Explorer и все хорошие браузеры пользуются соответствующим стандартам тэгом <object>, Netscape и браузеры, считающие себя его друзьями, вовсю развлекаются с <embed>, полностью игнорируя <object>. Тэг <object>
содержится в спецификации XHTML, но не совсем верно реализован
в IE-дружественных браузерах: он просит браузер запустить объект
флэш-плейера и загрузить в него ролик. Элемент <param> этого тэга играет роль злого гения: передает плейеру столько параметров, сколько им (тэгом) было задано.
<embed> не попал в спецификацию XHTML. Параметры в нем передаются через пары «имя/значение».

Элемент <embed>

Этот элемент был создан Netscape как собственный метод встраивания
плагинов и плейеров в веб-страницы. Он не попал в XTHML-спецификацию и…
мы же не любим нестандартные тэги, правда? Так что — прощай, <embed>… и не забудь закрыть за собой дверь!

Элемент <object>

Мы распрощались с тэгом <embed> и у нас на руках остался только <object>,
так что придется ему вывернуться наизнанку, стараясь нам помочь.
Приятная новость — как для нас, так и для него — это то, что почти
каждый браузер в наши дни так или иначе поддерживает этот элемент.

У элемента <object> нет обязательных атрибутов,
но список доступных действительно велик. Ниже приведены те, которые
могут нас заинтересовать и понадобятся в дальнейших научных
исследованиях.

classid (URI) — может использоваться для указания
местоположения реализации объекта при помощи URI. Этот атрибут может
быть применен вместо атрибута data (рассмотрен ниже) или вместе с ним.

codebase (URI) — указывает основной путь к обработчику относительных путей, заданных атрибутами classid, data и archive. Когда этот атрибут не указан явно, он принимает значение базового URI текущего документа.

data (URI) — может быть использован для указания местоположения данных, ради которых затевались все манипуляции с тэгом <object>, или даже для проставления ссылки на серийный выпуск объекта, который сможет восстановить локальную копию.

type (content-type) — указывает тип содержания для данного «объекта».

codetype (content-type) — указывает ожидаемый тип содержания «объекта» при его открытии с помощью classid.

Есть также другие атрибуты, которые позволяют делать то, что можно запросто реализовать и в самом flash`е, а также такие, как width, height, id, class и другие общеприменимые атрибуты. Те параметры, которые перечислены выше, являются значимыми при встраивании флэш-роликов.

Другой важной вещью, которую стоит запомнить всем разработчикам, является то, что <object>
может содержать вложенные элементы, которые будут отображаться, если
отображение ролика не поддерживается компьютером (не установлен
флэш-плейер). Кстати, вот объяснение, почему этот проклятый <embed> работает в Netscape и его дружках.

Действо

Вооружившись более глубоким пониманием вопроса, я провел несколько
операций, проверяя их в разных браузерах. Для начала я убрал
ненавистный нам всем <embed>, таким образом код стал соответствовать стандартам XHTML:

К сожалению, это не работает в не-IE браузерах, но мы ведь
и не ожидали, что они сдадутся так быстро. Потратив некоторое время
на поиск, я обнаружил, что атрибут classid является
специфическим для ActiveX-конфигурации браузера. Кстати, это именно
он уговаривал Netscape и Mozilla игнорировать объект. Между тем, роль
этого атрибута крайне важна: он сообщает браузеру, каким плейером
проигрывать объект. Так что нам не удастся так же легко, как в прошлый
раз, помахать ручкой и попросить закрыть за собой дверь.

К счастью, флэш-плейер откликается также на содержание с MIME-типом application/x-shockwave-flash. Это великолепно хотя бы потому, что есть возможность указать тип объекта, используя параметр type.
Итак, мы все-таки прощаемся с

и добавляем

Codebase

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

Во многих браузерах (и особенно в IE) этот атрибут выполняет другую
функцию: в пути, который содержит его значение, записан необходимый для
запуска ролика номер версии флэш-плейера. Выполнив простое сравнение,
браузер может предложить пользователю скачать более свежую версию
проигрывателя. Обратной стороной медали в данном случае является то,
что этот атрибут останавливает проигрывание роликов в Netscape
и Mozilla, если его использовать данным образом. Значит, придется
пустить его в расход. Как восполнить потерю функциональности мы обсудим
позже.

Итак, после того, как codebase мы признали не жильцом, html-код наконец-то стал выглядеть более или менее изящно:

Если попробовать открыть этот код, он все равно не отобразит ролик в
Netscape. Дойдя до этой точки, я испугался, что во всей Вселенной
не сыскать мне способа осуществления задуманного. Так что мне пришлось
прибегнуть к обычному для таких ситуаций испытанию самых безумных идей.

Эврика!

Когда я воспользовался атрибутом data, у меня чуть
не случился удар — ролики начали внезапно проигрываться в Netscape
и Mozilla. Как выяснилось, IE тоже не отказывался их показывать.

После серии проверок с большими роликами я заметил недостаток:
браузер IE под Windows не начинал проигрывание ролика, пока не скачивал
его весь, от начала и до конца. Понятно, что такой недостаток приемлем
для небольших роликов, но никак не может ужиться с огромными. Я пришел
к выводу, что создание соответствующего стандартам кода возможно,
но только после того, как Microsoft исправит свои ошибки.

Метод Satay

Несколько дней спустя я обсуждал эту проблему с Джефри Зельдманом
(Jeffrey Zeldman), объясняя, насколько близок я был к решению проблемы.
Он тоже заинтересовался, поскольку столкнулся с той же проблемой,
разрабатывая последние проекты. Все это заставило меня задуматься, и,
наконец, когда я брел к дому по пустынным ночным улицам, меня поразила
догадка.

Как мы уже выяснили, проблема заключается в том, что Windows
не хочет проигрывать ролик, пока не скачает его весь. А как насчет
создания очень маленького ролика, который в первом же кадре будет
подгружать в себя тот ролик, который мы действительно хотим показать?

Я проверил эту догадку, и она сработала. Возможно, это небольшое
заигрывание со стандартами, но во вполне допустимых пределах. Самое
хорошее в этом способе то, что можно создать универсальный контейнер
и пользоваться им в дальнейшем для подгрузки роликов с такими же
пропорциями, как и у ролика контейнера.

Образно говоря, не имеет значения, изготовлен ли ролик из ветчины,
курятины или говядины, вам все равно придется сначала обмакнуть его
в кетчуп, чтобы ощутить его настоящий вкус. Мы назвали это методом
Satay.

Ролик-контейнер

Я создал новый ролик, в первом кадре которого разместил следующий ActionScript:

Он указывает флэш-плейеру, чтобы тот загрузил ролик, имя которого
хранится в переменной path на нулевом уровне. Осталось только
динамически передавать эту переменную. Благодаря строковым параметрам
и тому, что они обрабатываются Flash`ем, это даже не назовешь
проблемой. Вот как решается этот вопрос: c.swf?path=movie.swf

Ролик-контейнер называется c.swf, и при таком вызове выражение,
указывающее на загрузку нужного ролика, выглядит для Flash`а так: _root.loadMovie("movie.swf",0);

Можно изменять поведение контейнера, пересылать значение переменной, используя методы post и get, но следует всегда помнить, что размер ролика-контейнера должен быть очень маленьким.

Финальный код

Осталось только завершить начинание. Итак, мы отказались от многих атрибутов, добавили новые, перемешали и залили в судочки:

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

Компенсация жертвам

Главная проблема при отстутствии атрибута codebase
заключается в том, что браузер просто не будет предлагать пользователям
обновить флэш-плейер. Как нам с вами известно, надеяться на то, что
большинство пользователей обновит свои проигрыватели собственноручно,
не приходится.

Решение этой проблемы на удивление несложно: просто принесите
в жертву какой-то пустой ролик в самом начале страницы. Понятно, что
при его объявлении следует указать атрибут codebase.
Таким образом, жертвуя 1 КБ трафика, мы достигаем нужной
функциональности. Пусть это не самый аккуратный, зато действенный
способ, который не наживет вам врагов.

Альтернативное содержание

Помните, что я говорил о том, что тэг <object>
может содержать вложенные дочерние тэги, которые браузер будет
обрабатывать, если у него ничего не получится с открытием объекта? Это
может нам очень пригодиться.

Если просмотреть исходный код главной страницы сайта Macromedia,
можно заметить, что они подставляют картинку для тех, кто не может
просматривать флэш-ролики. Код определяет, установлен ли флэш-плейер
на компьютере, и выполняет Java-скрипт, который динамически вписывает
нужный HTML-код. Жуть как неудобно. Вот как сделал бы это я:

Если браузер не знаком с MIME-типом application/x-shockwave-flash, он просто покажет посетителю картинку noflash.gif.

Продолжение следует

Я написал эту статью, зная, что это исследования всего одного
человека, так что научно-исследовательская работа на эту тему
продолжается. Отнеситесь к приведенной информации как к научной теории:
она считается доказанной, пока не доказана обратная.