Валидная вставка флэша

Автор: Дмитрий | 01 Апреля 2010

Периодически на разных программерских форумах возникают вопросы по валидной вставке флэш объектов на странички сайтов. Это касается как сайтов на Joomla, так и на других CMS. Сам вначале столкнулся с этой проблемой так как верстал сайт одной фирме и было условие - 100% безошибочное прохождение валидации верстки на сайте w3c.org. И при этом в шапке стоял флэш.

Для решения проблемы перерыл много информации и чтобы мой уважаемый читатель не тратил кучу времени на рытьё форумов выкладываю здесь своё резюме по вставке валидного кода для отображения flash объектов в документах типа XHTML 1.0 Transitional (большинство CMS на нем написано). Естественно, в примерах даны условные высота и ширина и пути к картинкам и файлам flash.

Вариант 1. Для прямой вставки рецепт от w3c (если нет плеера у клиента, то облом, ничего не крутится):

<object type="application/x-shockwave-flash"
 data="c.swf?path=movie.swf"
 width="400" height="300">
 <param name="movie" value="c.swf?path=movie.swf" /> 
</object>

Вариант 2. При таком коде вставленный флеш валиден, и если у посетителя отключен просмотр флеша, то вместо него будет отображаться фоновое изображение top.jpg (в примере все файлы берутся из папки img/ в корне сайта):

<object type="application/x-shockwave-flash" data="img/header.swf" width="400" height="300">
 <param name="movie" value="img/header.swf" />
 <param name="quality" value="high" />
 <param name="menu" value="false" />
 <param name="wmode" value="opaque" />
 <img src="/img/top.jpg" alt="Без флеша" height="300" width="400" /> 
</object>

Режим wmode установленный в opaque дает возможность не закрывать флэшем всплывающие окна, то есть убирается баг верхнего слоя.

Вариант 3. Валидный код, отличный скрипт, в Джумле его прямо так в наглую можно вставлять в статьи (естественно, если вы пользуетесь каким-то текстовым редактором типа JCE или FCK, то в них должна быть выключена очистка HTML кода). Кстати валидный код и для документов XHTML 1.0 Strict.*. Предварительно нужно сам скрипт где-нибудь на сайте сохранить и в коде прописать путь к нему относительно корня сайта (сам скрипт не тяжелый - около 6,7кб). Далее описание использования скрипта версии 1.5:

<script type="text/javascript" src="/относительный путь/swfobject.js"> </script>
<div id="flashcontent">Этот текст будет заменён флэшкой - пишите для поисковиков.</div>
<script type="text/javascript">
 var so = new SWFObject("movie.swf","Моя флешка","100%","100","7","#000");
 so.addParam("quality", "high");
 so.write("flashcontent"); 
</script>

Обратите внимание на строку 1 - если кто не знает, то пробел между тегами script обязателен, так как без него некоторые браузеры просто не загружают скрипт из тега.

Строка параметров имеет следующий синтаксис:

var so = new SWFObject(swf, id, width, height, version, background-color
 [, quality, xiRedirectUrl, redirectUrl, detectKey]);

• swf – путь к вашему флэш файлу.
• id – идентификатор вашего объекта или тега embed.
• width – ширина флэшки.
• height – высота флэшки.
• version – минимальная версия флэш плеера, которым должен прокручиваться ролик. Это текст в формате "majorVersion.minorVersion.revision". Пример: "6.0.65", если требуется как минимум Flash player v.6.0 r65.
• background-color – здесь задаётся цвет фона ролика в шестнадцатиричном формате.
• quality – качество воспроизведения ролика, по умолчанию - "high".
• xiRedirectUrl – пропишите адрес, на который перенаправятся пользователи после завершения обновления флэш плеера.
• redirectUrl – пропишите адрес, на который перенаправятся пользователи, у которых не установлен нужный флэш плеер.
• detectKey – Это имя переменной, которую будет искать скрипт в адресной строке для проверки включения/выключения работы скрипта. По умолчанию переменная названа "detectflash". Пример: для отключения работы скрипта на какой-либо странице в адресной строке можно добавить ?detectflash=false.

Здесь можно посмотреть примеры использования скрипта и другие подробности от разработчика, а также скачать последнюю версию самого скрипта. Скрипт версий 1.5 и 2.2 прикреплен внизу статьи, в архивах также и исходники и файлики с примерами использования. Также очень рекомендую почитать подробную статью про использование скрипта версии 2 (статья на русском).

Скачать:

SWFObject 1.5	[скрипт для вставки флэша версии 1.5]	62 Kb
SWFObject 2.2	[скрипт для вставки флэша версии 2.2]	27 Kb