Xiper

Вставка flash в HTML

Автор: Евгений Рыжков Дата публикации:

Задача

Вставить flash-объект в HTML страницу, придерживаясь следующих требований:

  • кроссбраузерность — работоcпособность во всех современных браузерах;
  • альтернативный контент — если не установлен flash или установленная устаревшая версия, выводим альтернативное изображение и ссылку для инсталляции свежей версии flash;
  • максимальная простота и гибкость использования метода;
  • SEO и юзабилити дружественность;
  • чистота кода — меньше кода, проще работать с шаблонами;
  • соответствие стандартам.

Решение с использованием javascript библиотеки SWFObject 1

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("6.0.0")) {<!-- указываем версию flash, на которой сделан ролик -->
var fn = function() {
var att = { data:"images/flash/test.swf", width:"200", height:"300" };<!-- указываем путь и имя flash-объекта, а так же его размеры -->
var par = {
menu:"true", <!-- для пользователя даем возможность управлять анимацией -->
quality:"high", <!-- высокое качество -->
wmode:"opaque" <!-- чтобы можно было перекрыть flash -->
};
var id = "replaceMe";<!-- id блока, куда будет вставлен flash -->
var myObject = swfobject.createSWF(att, par, id);
};
swfobject.addDomLoadEvent(fn);
}
</script>

Блок, в который будет вставлен flash, имеет альтернативный контент — это будет отображено при не установленном flash, либо при устаревшей версии. Для примера выведем альтернативную картинку и ссылку для установки свежей версии flash:

<div id="replaceMe">
<img src="images/flash/banner.gif" width="200" height="300" alt="Текст для поисковых роботов" />
<a href="" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div>

Демонстрация вставки одного flash-объекта. Для вставки нескольких flash-объектов используем необходимое количество контейнеров и вызовов функции вставки:

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("6.0.0")) {<!-- указываем версию flash, на которой сделан первый объект -->
var fn = function() {
var att = { data:"images/flash/test.swf", width:"200", height:"300" };
var par = {
menu:"true",
quality:"high",
wmode:"opaque"
};
var id = "replaceMe";<!-- id блока, куда будет вставлен первый flash -->
var myObject = swfobject.createSWF(att, par, id);
};
swfobject.addDomLoadEvent(fn);
}
if (swfobject.hasFlashPlayerVersion("9.0.1")) { <!-- версия flash второго объекта -->
var fn = function() {
var att = { data:"images/flash/test2.swf", width:"200", height:"400" }; <!-- второй объект -->
var par = {
menu:"true",
quality:"high",
wmode:"opaque"
};
var id = "replaceMe2"; <!-- блок для второго объекта -->
var myObject = swfobject.createSWF(att, par, id);
};
swfobject.addDomLoadEvent(fn);
} </script>

HTML:

<div id="replaceMe">
<img src="images/flash/banner.gif" width="200" height="300" alt="Текст для поисковых роботов" />
<a href="" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div> <div id="replaceMe2">
<img src="images/flash/banner.gif" width="200" height="300" alt="Текст для поисковых роботов" />
<a href="" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div>

Демонтрация вставки двух flash роликов.

Заметки

  • недостаток метода — у пользователей у которых установлен flash, но отключен javascript, увидят только альтернативное содержимое
  • использование параметра wmode может привести к некотрым ошибкам работы flash (например, при wmode="transparent" нельзя ввести кириллические символы в поля ввода), используйте его только когда это действительно необходимо + хорошо потом тестируйте функциональность flash-объекта
  • в предыдущей версии метода использовалось значение transparent параметра wmode, от него пришлось отказаться, т.к. обработка прозрачности ведет к снижению производительности браузера
  • проект SWFObject (есть документация, описание api)
  • хорошая статья по вставке flash в HTML

Решение с использованием javascript библиотеки SWFObject 2

update Александр Головко

Еще один вариант динамической вставки объекта реализуется вызовом функции embedSWF.

Для этого подключаем библиотеку, скачать которую можно на странице проекта SWFObject в Google Code:

<script type="text/javascript" src="js/swfobject.js"></script>

Как и в предыдущем варианте, создаем HTML контейнер для flash с альтернативным содержимым:

<div id="myContent">
<img src="images/flash/banner.gif" width="200" height="300" alt="Текст для поисковых роботов"/>
<a href="" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div>

При динамической вставке пишем скрипт, который вызывает функцию swfobject.embedSWF и передает ей параметры вставки flash-объекта. Это может выглядеть, например, так (демонстрационный пример взят из официальной документации):

<script type="text/javascript">
var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";
var params = {};
params.menu = "false";
var attributes = {};
attributes.id = "myDynamicContent";
attributes.name = "myDynamicContent";
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

Параметры и атрибуты вставки flash на страницу

Так как скрипт будет вставлять на страницу конструкцию object с вложенными param, необходимо передать ему параметры этой конструкции. Они делятся на три группы:

  1. параметры непосредственно скрипта;
  2. список элементов params вложенных в object.
  3. атрибуты элемента object;

Список параметров непосредственно скрипта

Это собственно аргументы функции swfobject.embedSWF()

Имя параметра Тип параметра Описание параметра
swfUrl String, обязательный URL SWF файла
id String, обязательный id HTML элемента (содержащего альтернативный контент) который должен быть заменен на Flash контент
width String, обязательный ширина SWF
height String, обязательный высота SWF
version String, обязательный версия Flash плеера необходимого для данного SWF (формат: "major.minor.release")
expressInstallSwfurl String, необязательный задает URL для express install SWF и активирует Adobe express install. Обратите внимание, что express install срабатывает только один раз (при первом выполнении), требует Flash плеер версии 6.0.65 или старше на Win или Mac платформах. Минимально возможный размер SWF для его работы 310x137px.
flashvars Object, необязательный переменные передаваемые Flash в виде пар имя:значение
params Object, необязательный элементы params вложенные в object в виде пар имя:значение
attributes Object, необязательный атрибуты элемента object в виде пар имя:значение
callbackFn JavaScript функция, необязательный может быть использована для определения функции обратного вызова, оповещая об успешном или неуспешном внедрении файла SWF

Параметры перечисляются через запятую. Необязательные параметры можно пропускать, заменяя значением false. При этом замыкающие false можно не указывать. Например вместо: 

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "false", flashvars, "false", "false", "false");

пишем просто:

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "false", flashvars);
Параметры flashvars, params и attributes являются JavaScript объектами, их можно пропустить не только вышеуказанным методом, но и передав пустой объект:{}.

params

Это те атрибуты, которые в нашем примере выглядят вот так:

var params = {}; 
params.menu = "false"

Каждая пара имя:значение «развернется» скриптом в отдельный тег param. Таблицу этих параметров можно посмотреть в статье Параметры для вставки объектов.

Для управления прозрачностью, часто применяется параметр wmode, для управления качеством — quality.

var params = {}; 
params.menu = "false";
params.wmode = "transparent";
params.quality = "high";

attributes

Это те атрибуты, которые в нашем примере выглядят вот так:

var attributes = {};
attributes.id = "myDynamicContent";
attributes.name = "myDynamicContent";

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

Для flashvars, params и attributes существует сокращенный вариант записи, в одну строку, без создания дополнительных переменных, например так:

<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {}, {}, {id:"myDynamicContent",name:"myDynamicContent"});
</script>

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

<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});
</script>

Тут всего-навсего написано: «Флешку из файла myContent.swf вставить в HTML элемент c id="myContent". Ширина флеша 300px, высота 120px. Требуемая версия Flash плеера 9.0.0. Для установки плеера при его отсутствии используем файл expressInstall.swf. В флеш передаем три переменных name1="hello" name2="world", name3="foobar". Отображаем меню, которое содержит только настройки и опции Flash. Созданному тегу object присваиваем id="myDynamicContent" и name="myDynamicContent"».

Немного громоздко, но совсем не страшно, не правда ли?

Напоследок еще один пример вставки флеша. Чуть более сложный и приближенный к реальности.

<script type="text/javascript">
var flashvars = {};
flashvars.categoryChosen="Slots";
flashvars.assets="";
var params = {};
params.menu = "false";
params.wmode = "opaque";
var attributes = {};
attributes.id = "flashBox";
attributes.name = "flashBox";
swfobject.embedSWF("flash/game.swf", "games", "800", "200", "9.0.124", "expressInstall.swf", flashvars, params, attributes);
</script>

Материалы

  • Adob ::Flash OBJECT and EMBED tag attributes
  • Code.google :: Swfobject