| 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 (статья на русском).
Комментарии
[censored]
RSS лента комментариев этой записи.