Valid XHTML Flash SWF Objects embedding (updated)
Upd.: Добавил ещё 1 способ, более рациональный.
Для тех, кто не знает, что такое 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" /> в принципе не нужно, можно оставить, можно и выкинуть. Выкинем.
В итоге получаем конструкцию, гораздо приятную, как для глаза, так и для валидатора:
Enjoy.
Crossposted from: LOLEG.com. You can comment here or there.
Дата публикации: Saturday, August 25th, 2007, 22:14
Автор: Hairgel_Addict
Разделы: HTML, JavaScript, Programming
Лента коментариев: RSS 2.0
Схожие по тематике заметки:
Коментировать
Trackback
August 15th, 2007 at 21:43 Quote
Автор этой статьи будь осторожен в XHTML кодировании. Тэги <OBJECT> и <EMBED> нужно использовать в паре. Дело в том что было и есть множество конкурирующих под солнцем браузеров, как и веб строителей и дезинформаторов напровляющих всех в device nul. Mozilla Firefox читает тэг <EMBED> если flash player стоит как plugin. IE >3.0 читает тэг <OBJECT> и использует activex элемент. Поэтому говорить что Macromedia Flash XX генерирует некоректный код не коректно. <EMBED> поэтому какраз-то и следует инкапсулировать в <OBJECT> для отображения во всех веб-браузерах. Статья сильно вводит в заблуждение.
August 20th, 2007 at 17:07 Quote
Отображаемость была проверена в IE6, IE7, Firefox2 & Opera9(всегда проверяю в этих 4х), т.е. в 4 самых распространенных браузерах. <EMBED> никогда не был тэгом ни в одной из версий HTML.
http://validator.w3.org/docs/help.html#faq-flash
<EMBED> был создан Netscape. Не знаю как дела обстоят с этим сейчас, возможно и по сей день используется для отображения Flash-a.. Используемость Netscape по всему миру на Июль 2007 года - 1.4%. За всю свою жизнь не встречал человека, пользующегося им. Параметры передаваемые в нем дублируются в <param name="" value"">
Даже специально только что скачал/установил последнюю версию Safari для Windows (BETA какая-то там). Прекрасно работает. Без понятия, что там "вводит в заблуждение". Почему-то более чем уверен, что вы никогда не занимались валидацией XHTML или просто не работали с клиентами, в частности, иностранцами, которые тупо заходят на http://validator.w3.org/, вводят адрес сайта, тычут пальцем и говорят "fix it."
А что насчет Macromedia, то они на своем сайте вовсе не используют собственный код, а вставляют flash javascript-ом.
August 21st, 2007 at 00:54 Quote
Элемент <EMBED> не поддерживается консорциумом W3C(хотя там и Microsoft,...) и поэтому он не включен в официальную спецификацию HTML. Встраиваемые в страницу обьекты могут быть файлами любого типа, которые обрабатываются модулями plug-ins установленными в браузере. Для отображения, какой plug-ins должен быть зыдействован, в атрибуте TYPE прописывается MIME тип. Тэг появился в Netscape. От куда у Mozilla голова наверняка знаешь. IE кстати спецификацию W3C не соблюдает(так как поддерживает "лунные" тэги). У Firefox-a тоже есть косяки с object. Ты пишешь код для IE, Firefox, Opera. И в тоже время обращаешься к проверщику W3C. Понимаешь броузеры не работают как единая спецификация. И в жизне приходится выходить другой дорогой. У меня как раз и была лажа в Firefox и IE.(я тоже как ты хитрил. получалось то в IE объект не отображается, то в Firefox. В итоге я вспомнил как хитрила когда-то Macromedia). Ну а усли клиент хочет что бы код работал только в IE, то нужно использовать validator раз просят. Хотя можно написать и свой валидатор и написать свои стандарты кодирования. Я думаю не спроста W3C валидатор ругается. Тут замешаны интересы microsoft (я не ругаю). Напишут все дизайнеры "правильный" код. А пользователю левого браузера придётся сменить на правильный IE. Запустит клиент валидацию - код "правильный". Откроет клиент как я в двух браузерах, увидит косяк, и найдет причину заплатить меньше. Хитрые клиенты пошли. :)
August 21st, 2007 at 12:44 Quote
"Отображаемость была проверена в IE6, IE7, Firefox2 & Opera9"
Отображаемость была проверена = Везде отображаеться. Пусть он хоть все 4 (5 включая Safari) откроет - везде, где вёрстку делал я, сайт будет отображаться нормально - без "косяков" (если конечно программисты не испахабят)..
З.Ы.: речь шла только о flash. не про какие другие "вставки" с помощью object или embed...
August 22nd, 2007 at 01:39 Quote
Нестандартные атрибуты одна из составляющих стандарта DOM.
jungle/html недано быть совместимым с xhtml.
Если будешь искать jungle/html в google, то найдёшь одни фотографии джунглей. :)
Но я не хочу как робот выполнять "часто глупые" рекомендации w3c
и следовать xhtml. xhtml - это для роботов.
Вместо тонны xhtml кода я могу написать 1 строку использования компонента jungle/html.
Вот пример:
<input type="text" size="12" mymask="url" maxlength="12">
w3c валидатор как всегда ругнётся. А на самом деле это
мои фичи с javascript-ом. На скрепте написан процессор.
Я с яваскриптом подключаю процессор и компоненты многоразового
использования и использую нестандартные тэги ибо w3c и microsoft еще не дорос.
Сочувствую xhtml друйдам.
August 25th, 2007 at 18:13 Quote
Я походе не понятно пишу или вы не хотите просто напросто понять, что я написал, как в посте, так и в комментариях.
В сочувствии не нуждаюсь.
August 26th, 2007 at 14:39 Quote
Не какую панику не поднимал. Я не холодный робот. Теперь статья действительно заимела пользу. Согласись без дополнительной мотивации она оставалась бы тем чем была.
August 29th, 2007 at 11:05 Quote
сорри что не по теме
не врубаюсь как зарегить нового ползователя на этом саите
August 30th, 2007 at 14:07 Quote
cdre4e @ 29.08.2007, 11:05 #
никак. а зачем это надо?
September 9th, 2007 at 12:24 Quote
Помещаю ссылку на дополнительную информацию по тэгам OBJECT и EMBED
http://flash-ripper.com/articles/flash/1997_06_19_object_embed_tag_attribs.htm
September 11th, 2007 at 16:12 Quote
Filosoff @ 30.08.2007, 14:07 #
уупс сорри , думал регаца надо чтоб постить :D
September 12th, 2007 at 14:34 Quote
Блин, а я и не знал! Спасибо!
October 6th, 2007 at 14:07 Quote
Мдя, незнал, спасибо за инфу
April 9th, 2008 at 14:17 Quote
Автору ЗАЧОТ!!!
Спасибо. Давно искал такую инфу.