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

Octane, 06.10.2008

Flash insertПоговорим о том, как кросс-браузерно разместить на страницах сайта 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». Примите участие в обсуждении вопроса: «Нужна ли Большая Рыжая Кнопка RSS на сайте?».

Подписаться на обновления блога

Вам понравился наш блог, хотите следить за обновлениями? Подпишитесь на RSS рассылку или рассылку по электронной почте. Так же вы можете следить за нами в Twitter.

Категории: Flash, JavaScript | Комментировать

Комментарии (22)

  1. evgen / 15.12.2008 в 08:15

    что есть node???

  2. Stepler / 15.12.2008 в 17:19

    node это узел DOM дерева (html элемент), в который вставится Flash анимация.

    Задается он объектом, возвращаемым функцией getElementById('id')

  3. ELFovi4 / 23.12.2008 в 18:02

    Скрипт оболденный.
    Вот только одного не могу понять, как прописать ссылку для флэшки?

    Чтоб не прописывать ссылку в самом флэше, а чтоб можно было более динамично менять ее.

  4. Octane / 23.12.2008 в 22:42

    Можно записать ссылку в параметр «flashvars» и в swf-файле создать обработчик, который по клику возьмёт этот адрес:

    <param name="flashvars" value="URL=http://www.somesite.ru/" />

    Параметр устанавливается так же, как «quality», «wmode» и другие:

      var parametrs = {
        flashvars: 'URL=http://www.somesite.ru/'
      };
    
  5. ELFovi4 / 24.12.2008 в 11:51

    Спасибо, разобрался.
    Можно использовать такой вариант как компромисс.

    Возможен вариант прописать ссылку, не внедряя в сам flesh перехватчик?
    А обрабатывать все без участия флэша?

  6. Octane / 24.12.2008 в 12:46

    Скорее всего нет

  7. Run / 30.01.2009 в 21:36

    Доброе время суток! не подскажете, как сделать так чтобы при переходе с одной странице на другую Flas не перезегружался…иначе это не приемлимо, т.к. он «весит» почти 3 метра.

  8. Skaizer / 31.01.2009 в 14:29

    Run, добрый день! Если кеш в браузере включен, то Flash не будет грузиться с сервера при повторных открытиях страницы.

  9. Grom3D / 09.03.2009 в 10:52

    Как обеспечить вставку нескольких flash на одну страницу?

  10. Octane / 09.03.2009 в 12:36

    Вызывайте функцию flashInsert для каждого Flash-файла.

  11. Grom3D / 09.03.2009 в 13:57

    Благодарю

  12. gleb316 / 29.05.2009 в 06:02

    Возможно ли втавить flash анимацию в любое место экрана?

  13. Skaizer / 29.05.2009 в 09:42

    Да, возможно.

  14. spunk / 12.06.2009 в 14:44

    Буду очень признателен, если дополнит пропущенные моменты, такие как «проверку версии установленного у пользователя Flash-плеера и в случае не соответствия требуемой, выводить сообщение с просьбой об обновлении. Так же при помощи callback-вызова от swf-файла можно определить доступность Flash на компьютере клиента». Сам я даже хтмл понимаю с трудом, спросить некого, а сделать нужно :(

  15. Octane / 12.06.2009 в 16:45

    >> Буду очень признателен, если дополнит пропущенные моменты, такие как “проверку версии установленного у пользователя Flash-плеера и в случае не соответствия требуемой, выводить сообщение с просьбой об обновлении.

    А зачем? :-) Ведь получится же почти тоже самое, что и SWFObject. В статье я привел пример с минимальным количеством кода, если нужен больший функционал, возьмите SWFObject и пользуйтесь.

  16. alex / 14.11.2009 в 10:38

    В опере не активируется Flash ролик — это не подходит только для интерактивных флешек.
    я использую такой код http://tibethimalaya.ru/js/flashLoader.js
    уже даже забыл где взял )

    вставляется так:
    AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0′,’width’,’100%’,’height’,’100%’,’src’,’button1′,’quality’,’high’,’pluginspage’,’http://www.macromedia.com/go/getflashplayer’,’movie’,’tour1′ );

    важно: tour1 — имя flash файла БЕЗ расширения

  17. KIL / 19.01.2010 в 20:49

    Подскажите кто знает, как в flv плеер на DLE воткнуть ссылку на рекламу так чтоб пользователь мог нажать на плэй и открылась другая страница в браузере с рекламой. Или дайте ссылку на сайт где это можно найти

    Зараннее благодарен

  18. flash / 23.07.2010 в 00:24

    Ни фига себе велосипед! Есть же swfobject :)

  19. Мария / 11.11.2010 в 10:48

    Вопрос: коды, которые Вы написали для ie и прочих браузеров, будут работать вместе.
    Потому, что я использовала похожие коды, то FireFox и Opera не воспринимает код для ie, а вот ie видит все варианты кодов!
    Возможно не подскажете, как сделать универсальный код Flash анимации или хотя бы, чтобы данные коды не мешали друг другу?

    Заранее спасибо.

  20. Белая Церковь / 06.12.2010 в 15:42

    спасибо большое! а то я думал что у меня с браузером что-то не то. во всез работало а вот в ослике — нет.

  21. вадим / 07.11.2015 в 08:16

    давно ни кого не было , если вопрос будет кто нибудь ответит

  22. Михаил / 09.04.2017 в 17:18

    https://dev20.ru/online-photoshop фотошоп онлайн, почему тут вставка не работает?

Оставить комментарий

480×60
480×60