Valid XHTML Flash SWF Objects embedding

3
Просмотров: 846

http://imdwc3.pbwiki.com/f/w3c.jpg

Для тех, кто не знает, что такое XHTML и не слышал о таком сайте, как W3C.org или просто напросто не занимается валидацией XHTML-a, эта статья, в принципе, будет бесполезной.

Лично для меня, валидный XHTML, не то чтобы очень важен, но за время работы Web Developer-ом валидация написанного кода вошла в привычку — я даже уже не обращаю особого внимания на это, а чисто автоматически пишу валидный XHTML, хоть у меня и установлен Add-On для Firefox-a: Html Validator .

Это маленькое вступление ничуть не хвастовство, всего лишь небольшая мотивация написание сей статьи. Если вы, так же как и я, проверяете валидность XHTML-a, то думаю сталкивались с тем, что Flash объекты не проходят валидацию. Лично я не обращал на это внимания, т.к. это никак не влияло на отображение страниц и до недавнего времени не было обязательным требованием со стороны заказчика (полностью валидный код вместе с flash-ем).

Код, приведённый ниже, это код, который генерируется Macromedia (теперь уже Adobe) Flash-ем при “публикации” .SWF вместе с .HTML страницей. Macromedia/Adobe Dreamweaver при вставке .SWF генерирует практически такой же код:

<object classid="clsid:d27cdb6e-ae6d-11cf-[...]” codebase=”http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″ width=”180″ height=”80″>
<param name=”movie” value=”logo.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#ffffff” />
<embed src=”logo.swf” quality=”high” bgcolor=”#ffffff” type=”application/x-shockwave-flash” width=”180″ height=”80″ pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>

…но в нем очень много “мусора” и поэтому он НЕ ВАЛИДНЫЙ!

В Интернете можно найти очень много статей на эту тему и про то, как этот код можно “почистить”.

Способ №1.

Обратил внимание на тот интересный факт, что на сайте Macromedia(Adobe) они не используют собственный код, а вставляют Flash Javascript-ом. Стало интересно, что за способ такой и оказалось, что очень даже “сексуальный” способ, т.к. он проходит валидацию и использует <embed> тэг, из-за которого один из читателей сайта, куда я делаю “crosspost” подобных постов, поднял шум.

Кроме того, нашел в одной из статей по поводу валидной вставки Flash-а, что Способ №2 может вызвать небольшие трудности у пользователей с IE6, т.к. IE6 не может обращаться к нему, как к потоку (cannot stream). Решил оставить его, как альтернативный метод, “правильный” согласно с W3C.org.

Идея и “хитрость” вставки Flash-а при помощи Javascript-а заключается в том, что Javascript “прячет” <embed> тэг, столь “неугодный” Validator-у W3C.org и Html Validator Add-On-у.

SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents, and is forward compatible, so it should work for years to come.

После того, как скачали этот script и прописали внутри <head>…</head>:

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

…можно приступать к вставке самого Flash-a, что, на мой взгляд, делаеться очень даже красиво и приятней для глаза, чем код, приведённый выше от Macromedia/Adobe Dreamweaver. Сперва вставляем элемент, внутрь которого будет вставляться Flash:

<div id="flashcontent">
Этот текст будет заменён Flash роликом, его пользователь увидит лишь в том случае, если у
него нет необходимой версии Flash Player-а или вовсе его нет.
</div>

И конструкция, вставляющая Flash ролик:

<script type="text/javascript">
var so = new SWFObject("logo.swf", "flashcontent", "180", "80", "8", "#FFFFFF");
so.write("flashcontent");
</script>

Все возможные параметры, которые можно передавать функции SWFObject:

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

Чуточку подробней о каждом. Сперва обязательные параметры:

swf - Пусть к Flash ролику.
id - ID того элемента, куда будет вставляться Flash (в нашем случае - “flashcontent”).
width - Ширина Flash ролика.
height - Соответственно, высота ролика.
background-color - Цвет фона у ролика.

Возможные дополнительные параметры:

quality - Качество отображения. По умолчанию “high”.
xiRedirectUrl - Адрес, куда переадресовывать пользователей после ExpressInstall upgrade.
redirectUrl - Адрес переадресации пользователей без необходимой версии Flash Player-a.
detectKey - Специальная “URL переменная” на случай, когда нет необходимости проверять на наличие Flash-a, путем добавления к URL с документом ?detectflash=false

И это не всё. SWFObject умеет ещё много всего полезного. Например, задавать прозрачность у Flash ролика и передавать ему Flashvars (полный список параметров):

<script type="text/javascript">
var so = new SWFObject("logo.swf", "flashcontent", "180", "80", "8", "#FFFFFF");
so.addParam("wmode", "transparent");
so.addVariable("variable1", "value1");
so.addVariable("variable2", "value2");
so.addVariable("variable3", "value3");
so.write("flashcontent");
</script>

Думаю, не трудно догадаться, что этот способ мне больше понравился, по уделенному вниманию и времени на его описание.

Способ №2.

Брутальный способ.

1. Выкидываем <embed> тэг - он не нужен и он, как раз таки, и не проходит валидацию.
2. “Страшная” часть с classid делает лишь то, что “говорит” Internet Explorer-у какой player использовать. С этим прекрасно справляется type=”application/x-shockwave-flash”, поэтому classid можно тоже выкинуть.
3. Атрибут codebase указывает ссылку на копию Flash Player-а на сервере Macromedia, что является не правильным использованием этого атрибута. Правда, в некоторых браузерах (Internet Explorer), этот атрибут выполняет ещё одну функцию - указывает какую версию Flash Player-а надо использовать для просмотра .SWF и если необходима другая версия, пользователю предлагается её установить. Короче, codebase тоже выкидываем.
4. <param name=”bgcolor” value=”#ffffff” /> в принципе не нужно, можно оставить, можно и выкинуть. Выкинем.

В итоге получаем конструкцию, гораздо приятную, как для глаза, так и для валидатора:

<object type="application/x-shockwave-flash" data="logo.swf" width="180" height="80">
<param name="movie" value="logo.swf" />
<param name="quality" value="high" />
</object>

3 КОММЕНТАРИИ

  1. Спасибо! Очень понравилась статья.
    — А как можно флешь центрировать? Или всавить во вложенный «див» — у меня при вставке во вложенный див, при многократном рефреше страницы, пропадает флеш.

  2. Здравствуйте.
    Спасибо, полезная статья.
    Интересует следующие…
    можно одним кодом запустить 2 .swf файла?
    что бы первый был прелоадер, и исчезал через 15 секунд, после чего грузилася флешка нормальная?

ОСТАВЬТЕ ОТВЕТ