Вставка Flash-анимации

Поговорим о том, как кросс-браузерно разместить на страницах сайта Flash-анимацию и сохранить валидность XHTML-документа.

Мы знаем, что тег <embed>, который так часто используется для внедрения swf-файлов в HTML-страницы отсутствует в популярной на данный момент спецификации «XHTML 1.0 Strict», что вызывает ошибки во время прохождения тестов W3C на соответствие стандартам при использовании этого тега.

Современные браузеры поддерживают универсальный контейнер <object>, с помощью которого можно легко вставить Flash-файл на сайт, указав атрибуты «data» (ссылку на файл) и «type» (тип контента), но «Internet Explorer» работает с <object> по своему, он не воспринимает ссылку на swf-файл, указанную в атрибуте «data», а требует добавления дочернего тега <param> c атрибутами name="movie" и value="ссылка-на-swf-файл". На этом проблемы не заканчиваются. Для «Internet Explorer» в теге <object> необходимо указать «classid» ActiveX-элемента, но «FireFox» почему-то блокирует такой контейнер.

Получается, что для «FireFox» и «Internet Explorer» нужно выдать совершенно разный XHTML-код. Что же делать? Очевидный вариант — использовать возможности JavaScript для динамического создания нужных узлов. Существует готовое решение «SWFObject» — это огромный скрипт, позволяющий внедрять «Flash» в веб-страницы, но его размер мне кажется не приемлимым. Версия 2.1 занимает 9,5кб в минифицированном виде, мне кажется, что для решения столь узкоспециализированной задачи это слишком много. Хотя конечно «SWFObject» предоставляет богатый функционал для внедрения «Flash».

Немного поэкспериментировав, я нашел 2 самых простых варианта XHTML-кода: Для Internet Explorer:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="" height="">
<PARAM name="movie" value="url" />
</OBJECT>

Для остальных браузеров:

<object type="application/x-shockwave-flash" data="url" width="" height=""></object>

Этого кода достаточно, чтобы мы увидели работающую Flash'ку на сайте. Теперь напишем скрипт, который будет динамически генерировать данные DOM-узлы с необходимыми атрибутами, в зависимости от используемого браузера. А так же добавим возможность указать свои параметры, такие как «flashvars», «quality», «wmode» и другие.

function insertFlash(node, url, width, height, params) {
  var object, param, key;
  function newParam(name, value) {
    if(0 /*@cc_on + 1 @*/) return ['<PARAM name="', name, '" value="', value, '" />'].join('');
    else {
      param = document.createElement('param');
      param.name = name;
      param.value = value;
      return param;
    }
  }
  if(0 /*@cc_on + 1 @*/) {
    object = ['<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="', width, '" height="', height, '"><PARAM name="movie" value="', url, '" />'];
    if(params) for(key in params) if(params.hasOwnProperty(key)) object.push(newParam(key, params[key]));
    object.push('</OBJECT>');
    node.innerHTML = object.join('');
  }
  else {
    object = document.createElement('object');
    object.type = 'application/x-shockwave-flash';
    object.data = url;
    object.width = width;
    object.height = height;
    if(params) for(key in params) if(params.hasOwnProperty(key)) object.appendChild(newParam(key, params[key]));
    while(node.firstChild) node.removeChild(node.firstChild);
    node.appendChild(object);
  }
}

Теперь в любое время, после того, как будет готов DOM, можно вставить «Flash» на страницу в указанный контейнер, при помощи функции «insertFlash».

// Пример
window.onload = function() {
  var logo = document.getElementById('logotype');
  var url = '../flash/logo.swf';
  var width = 320;
  var height = 240;
  var parametrs = {
    wmode: 'transparent',
    quality: 'high'
  };
  insertFlash(logo, url, width, height, parametrs);
};

Тестировал в FireFox 2.0.0.13/3.0.3, Opera 9.27/9.52/9.60b, Safari 3.1 (win), Google Chrome 0.2 и Internet Explorer 5.5/6/8b2.

При желании можно добавить проверку версии установленного у пользователя Flash-плеера и в случае не соответствия требуемой, выводить сообщение с просьбой об обновлении. Так же при помощи callback-вызова от swf-файла можно определить доступность Flash на компьютере клиента. Но в большинстве случаев это всё не нужно.

В дополнение приведу пример добавления своих методов для работы с DOM-узлами в моем JavaScript framework’е «js-core». Добавим метод «flash», который выполняет аналогичные вышеприведенному скрипту действия, но написан с использованием функций framework’а.

_$.prototype.extend({
  flash: function(url, width, height, param) {
    if(core.ie) {
      var obj = ['<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="', width, '" height="', height, '"><PARAM name="movie" value="', url, '" />'];
      if(param) $.foreach(param, function(name, value) { obj = obj.concat(['<PARAM name="', name, '" value="', value, '" />']); });
      obj.push('</OBJECT>');
      this.html(obj.join(''));
    }
    else ({}).extend(param).each(function(obj) { obj.append('param').attr({name: this, value: param[this]}); }, [this.empty().empty().append('object').attr({type: 'application/x-shockwave-flash', data: url, width: width, height: height})]);
    return this;
  }
});

Используем так:

$('logotype').flash('../flash/logo.swf', 320, 240, {wmode: 'transparent'});

Надеюсь теперь у Вас не возникнет проблем с внедрением «Flash» в свои веб-проекты.

Полезно почитать

В начале статьи говорилось о «SWFObject», как его использовать можно прочесть на русском языке в статье «Внедрение Flash с помощью SWFObject». О том, что можно ставить активные ссылки не только для e-mail, читаем в заметке «Ссылки на Skype и ICQ».