Вставка flash в HTML
Подготовил: Евгений Рыжков
Дата публикации: 23.02.2009
Задача
Вставить flash-объект в HTML страницу, придерживаясь следующих требований:
- кроссбраузерность — работоcпособность во всех современных браузерах;
- альтернативный контент — если не установлен flash или установленная устаревшая версия, выводим альтернативное изображение и ссылку для инсталляции свежей версии flash;
- максимальная простота и гибкость использования метода;
- SEO и юзабилити дружественность;
- чистота кода — меньше кода, проще работать с шаблонами;
- соответствие стандартам.
Решение
Используем javascript библиотеку SWFObject:
<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="http://www.macromedia.com/go/getflashplayer" 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="http://www.macromedia.com/go/getflashplayer" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div>
<div id="replaceMe2">
<img src="images/flash/banner.gif" width="200" height="300" alt="Текст для поисковых роботов" />
<a href="http://www.macromedia.com/go/getflashplayer" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div>
Демонтрация вставки двух flash роликов.
Заметки
- недостаток метода — у пользователей у которых установлен flash, но отключен javascript, увидят только альтернативное содержимое
- использование параметра wmode может привести к некотрым ошибкам работы flash (например, при wmode="transparent" нельзя ввести кириллические символы в поля ввода), используйте его только когда это действительно необходимо + хорошо потом тестируйте функциональность flash-объекта
- в предыдущей версии метода использовалось значение transparent параметра wmode, от него пришлось отказаться, т.к. обработка прозрачности ведет к снижению производительности браузера
- Скачать библиотеку SWFObject (9.5Kb)
- проект SWFObject (есть документация, описание api)
- хорошая статья по вставке flash в HTML
Теги: работа с флеш