Эта статья расскажет Вам о вставке flash на сайт. Поможет выбрать наилучший метод интеграции flash-контента  расскажет о подводных камнях и тонкостях кроссбраузерной вставки flash в HTML-разметку страницы.

Как вставить флеш на сайт? Рассмотрим и сравним следующие методы вставки flash:

  • Двусоставной метод вставки flash-ролика
  • Метод вложенных объектов
  • Метод Flash Satay
  • Внедрение с помощью SWFObject

Двусоставной метод вставки flash в HTML

Метод характеризуется использованием двух тегов: object  и embed, с перечислением необходимых параметров и атрибутов.

Код для вставки flash:

<object width="280" height="600" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0" 
type="application/x-shockwave-flash" data="/banners/simply.swf">
	<param name="quality" value="high" /> 
	<param name="scale" value="noborder" /> 
	<param name="salign" value="t" /> 
	<param name="wmode" value="opaque" /> 
	<param name="src" value="/banners/simply.swf" /> 
	<embed width="280" height="600" id="linebanner" src="/banners/simply.swf"> </embed> 
</object>

Вставка flash на сайт двусоставным методом имеет свои очень весомые достоинства:

  • Полная и бескомпромисная кроссбраузерность
  • Установка флеш плагина прямо у вас на сайте, это очень важно, тк Вы не теряете посетителя, а может быть и клиента!

Из данного кода видны очевидные недостатки:

  • Дублирование параметров
  • Невалидность тега embed
  • Иррациональность
  • Использование необходимых, но малопонятных параметров типа classid и codebase

classid - при вставке flash это константа, всегда имеет значение clsid:d27cdb6e-ae6d-11cf-96b8-444553540000, это значение указывает на элемент ActiveX;
codabase - этот атрибут содержит ссылку на Flash-плеер, для установки плеера, если он отсутствует на компьютере пользователя;


Стоит отметить, при публикации флеш-ролика из программы Adobe Flash вставка swf-файла в HTML разметку осуществляется именно двусоставным методом.

Также в пользу этого метода говорит то, что его используют во многих популярных визуальных редакторах (WYSIWYG), и как следствие, он используется во многих системах управления сайтом(CMS), в том числе и коммерческих (например bitrix). Да и программы вёрстки тоже его используют (например Dreamweaver).

Метод вложенных объектов

Метод характеризуется использованием двух тегов object, где один из них вложен в другой.

Код для вставки flash:

<object width="280" height="600" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
        <param name="movie" value="/banners/simply.swf" />
        <param name="quality" value="high" /> 	
        <param name="scale" value="noborder" /> 
	<param name="salign" value="t" /> 
	<param name="wmode" value="opaque" /> 
	<param name="src" value="/banners/simply.swf" />

   <!--[if !IE]>--><object width="280" height="600" type="application/x-shockwave-flash" 
   data="myContent.swf"><!--<![endif]-->       

        <param name="quality" value="high" /> 	
        <param name="scale" value="noborder" /> 
	<param name="salign" value="t" /> 
	<param name="wmode" value="opaque" /> 
	<param name="src" value="/banners/simply.swf" /> 
        <p>Альтернативное содержимое</p> 
   <!--[if !IE]>--></object><!--<![endif]-->
</object>

Вставка flash на сайт методом вложенных объектов имеет следующие плюсы:

  • Валидность и соответствие стандартам
  • Возможность показа альтернативного содержимого, если не установлен flash-плеер

Этот метод имеет много недостатков, такова цена валидности:

  • Дублирование параметров
  • Объемный код
  • Иррациональность
  • Использование условных комментариев (для обеспечения кроссбраузерности)
  • Не все браузеры предложат установить flash-плеер, при его отсутствии

Как видно из кода цена валидности действительно высока. Соответствие стандартам, полезно ровно до тех пор, пока не нарушается кроссбраузерность, правильность отображения и удобство использования. Если бы можно было обойтись одним тегом object, без дублирования параметров и атрибутов, веб-мастера не стали бы изобретать многочисленные "велосипеды". Хотя использование условных комментариев (conditional comments) валидно и решает свои задачи, вряд ли кто-то скажет, что это действительно удобно. 

Возможно, в будущем разработчики браузеров позаботятся о веб-мастерах, верстальщиках, веб-дизайнерах и сделают возможным использование одного удобного метода вставки флеш в html-разметку, но доля устаревших браузеров еще велика и спокойно его использовать можно будет не скоро.

Вставка флеш на сайт методом Flash Satay

Метод характеризуется, использованием тега object, минимализацией кода вставки flash на сайт и использованием, при необходимости, дополнительного флеш-загрузчика (прелоадера).

Сатай много эксперементировал с кодом вставки флеш в HTML-разметку, изучал тонкости обработки параметров различными браузерами. Основная идея заключается в избавлении веб-мастеров от необходимости использовать тег embed, вместе с тем отбрасывая необходимость дублировать параметры, делая код валидным!

Код для вставки flash:

<object type="application/x-shockwave-flash" data="c.swf?path=myContent.swf" width="280" height="600"/> 
<param name="movie" value="/banners/simply.swf" />  
<p>Альтернативное содержимое</p> 
</object> 

*Опустим необязательные теги param для удобства :)

Вставка флеш на сайт методом Flash Satay, достаточно оптимизирована и удобна! Метод хорошо подойдет для flash баннеров и легких flash-роликов, если флеш-контент весит много Мб или должен быть расчитан и на аудиторию с низкой скоростью интернета, то нужно использовать загрузчик, в который передается путь к основному файлу. Это связано с особенностью данного метода, флеш содержимое будет отображено только после полной загрузки. Стоит отметить, что для большинства флеш приложений так или иначе нужно использовать прелоадер. В данном слечае путь к загружаемому файлу передается через атрибут data и Get-переменную → data="c.swf?path=myContent.swf", можно передавать путь и другими способами, например, через FlashVars

Плюсы использования метода Flash Satay:

  • Валидная вставка flash в HTML
  • Кроссбраузерная вставка flash в HTML
  • Возможность показа альтернативного содержимого

Минусы вставки флеш методом Flash Satay:

  • Отображение флеш-контента только после полной загрузки
  • Необходимо использовать прелоадер (загрузчик) для тяжелых флеш роликов и приложений
  • Необходимо передать путь загружаемого флеш ролика
  • Не все браузеры предложат установить flash-плеер, при его отсутствии

Вставка Flash на сайт методом SWFObject

Метод характеризуется использованием внешней js-библиотеки SWFObject, завоевавшей популярность у веб-мастеров. Соответственно вставка flash на страницу осуществляется подключением библиотеки и запуском js-функции.

Существует два вида вставки флеш с помощью SWFObject: статический и динамический.

Первое, что нужно сделать это скачать js-библиотеку SWFObject, выложить её на сервер и подключить js-файл в html-разметке, лучше это сделать внутри тега head вместе с другими файлами js и css:

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

Далее следует выбрать какой из этих способов лучше всего подходит для Вашего проекта, рассмотрим оба варианта:

Динамический метод вставки flash с применением SWFObject

Код для вставки flash:

<script type="text/javascript">//<![CDATA[
   var flashvars = {};
   var params = {
                 wmode: "transparent",
                 quality: "high",
                 scale:"noscale",
                 menu:"none"
                };
   var attributes = {};
   
   swfobject.embedSWF("/template/simply.swf", "idContainer", "280", "600", "9.0.0", 
   "/template/expressInstall.swf", flashvars, params, attributes);

           //]]>
</script> 
 <div id="idContainer">
      <p>Альтернативное содержимое</p>
 </div>

Вставка флеш на сайт динамическим методом библиотеки SWFObject обладает следующими достоинствами:

  • Валидная вставка flash на сайт и соответствие стандартам
  • Кроссбраузерное отображение flash-контента
  • Удобство использования
  • Возможность показа альтернативного содержимого, если не установлен flash-плеер
  • Возможность обновления flash-плеера, до необходимой версии

Этот метод имеет ряд незначительных недостатков и неудобств при вставке флеш на сайт:

  • Необходимость использования внешней библиотеки
  • Использование java script
  • Подмена содержимого**
  • Отсутствие установки флеш-плеера***

** При вставке flash на сайт динамическим методом SWFObject заменяет альтернативное содержимое на flash. Замена содержимого осуществляется, если на пользовательском компьютере в браузере включена поддержка JavaScript и установлен flash-плеер. Для отображения на сайте - это хороший прием, но только не для поисковых систем! Поисковые системы негативно воспринимают подмену содержимого, как и текст скрытый от пользователя, который может быть SEO-текстом. 

*** Если на клиентском компьютере не установлен flash-плеер, то пользователь увидит лишь альтернативное содержимое. В данном случае логично предложить пользователю установить надстройку, для отображения флеш и уже в полной мере наслаждаться красотой сайта, интерфейсом и юзабилити. Действительно можно указать в альтернативном содержимом ссылку для скачивания флеш-плеера, но в случае согласия пользователя он или перейдет на сайт загрузки или открыв сайт загрузки плеера в новой вкладке (окне), все равно будет вынужден закрыть браузер после установки плагина. Для этой ситуации есть изящное решение: разместить ссылку не на сайт adobe для скачивания плеера, а на страницу Вашего сайта с внедренным флеш двусоставным методом! Это позволит пользователю установить плагин не покидая Вашего сайта!  

Использование динамического метода SWFObject вставки flash на сайт - хорошое решение для любого проекта, но переизбытка флеш-контента быть не должно,  чтобы поисковики спокойно реагировали на замену альтернативного содержимого. 

Вернуться в раздел: Блог