Впровадження Flash за допомогою JavaScript

Поговоримо про те, як крос-браузерні розмістити на сторінках сайту 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 на сайті? ».

Що ж робити?