XHTML и заместване на тага embed

Тага embed служи за вмъкване на видео или аудио файл в уеб страница, така че при зареждане на страницата мултимедийния файл може да  започне да се изпълнява директно. За съжаление този таг не е по XHTML стандарта и се използват различни техники за заместването му.

Ако имаш обикновен swf файл с флаш анимация, която искаш да стане валиден XHTML, прочети Флаш анимация без таг embed за валиден xhtml

В разгледания пример има HTML код за смяна на картинки - слайдшоу. Картинките са описани в XML файл, който се подава на SWF файл. Файла player.swf е флаш плеър, който сменя картинките, като плавно прелива от едната в другата през 5 секунди. Освен това в долния десън ъгъл показва толкова бутончета, колкото са картинките и може бързо да се превключва между тях. Работеща версия може да видиш в страницата на вила Ливадето.

Стария HTML код е несъвместим с XHTML стандарта и дава грешки при проверка с валидатора.
Ето грешния код:

<div id=“slideshow“><object width=880 height=330
classid=“clsid:D27CDB6E-AE6D-11CF-96B8-444553540000″
codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab“>
<param name=“movie“ value=“player.swf“>
<param name=“quality“ value=“high“>
<param name=“loop“ value=“true“>
<param name=“wmode“ value=“opaque“>
<param name=“autoplay“ value=“true“>
<param name=“FlashVars“ value=“bcastr_xml_url=slideshow.xml&AutoPlayTime=5″>
<embed src=“player.swf“ width=880 height=330 quality=“high“
type=“application/x-shockwave-flash“ wmode=“opaque“
FlashVars=“bcastr_xml_url=slideshow.xml&AutoPlayTime=5″ loop=“true“ autoplay=“true“
pluginspage=“http://www.macromedia.com/go/getflashplayer“></embed>
</object>
</div>

Този код се замества със следния валиден код:


<div id=“slideshow“>
<script src=“ac_activex.js“ type=“text/javascript“></script>
<script type=“text/javascript“>
AC_RunFlashContent(‘width’,’880′,’height’,’330′,’quality’,’high’,
‘autoplay’,’true’,’loop’,’true’,’wmode’,’opaque’,
‘FlashVars’,’bcastr_xml_url=slideshow.xml&amp;AutoPlayTime=5′,’codebase’,
‘http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab’,’pluginspage’,
‘http://www.macromedia.com/go/getflashplayer’,’src’,’player.swf’);
</script>
</div>

За да работи този скрипт е нужен файла ac_activex.js да бъде качен в главната уеб директория. Той осигурява и това страницата да работи на всички браузъри. В примера се предполага, че файловете player.swf и slideshow.xml също са в главната уеб директория.

Крайният резултат е валиден HTML документ и работещ код на всички браузъри.

Ако JavaScript-а на браузъра е спрян, този код няма да сработи. За съжаление в момента нямам решение с тага object, което да работи на всички браузъри и да е валиден XHTML. Ако някой има идеи да пише, ще се радвам да ги науча. Най-малкото което може да се направи е да се сложи <noscript> блок, който да съдържа зареждане на първата картинка. Така поне първата картинка от поредицата картинки ще се покаже.

Прочетена:14017
1 - лоша2 - слаба3 - средна4 - добра5 - отлична (1 гласа, оценка: 5,00 от 5. Моля изберете оценка!)
Loading...
Георги Стефанов
Магистър по информатика, който се занимава с компютри от 1988 г., професионално с програмиране от 1998 г., а с уеб технологии от 2002 г. Има богат опит при оптимизиране на бизнес сайтове. Повече от 15 години развива успешно свои уеб проекти и работи с български и международни компании за постоянно подобряване на техните сайтове и увеличаване на онлайн продажбите. 

8 comments on “XHTML и заместване на тага embed”

  1. Тази смяна на картинки може спокойно да се направи само на JavaScript и с jQuery. Така се избягва бавния и неудобен Flash, а картинките си остават достъпни за търсачката, което е много важно. Виж cms.cloxy.com - има демо на подобно нещо на JS и jQuery.

    А що се отнася до видеотата, в HTML5 ще има video таг, където видео файлове ще се вкарват като картинки 🙂 Flash е излишен 😉

  2. Както казах има няколко решения. Cloxy благодаря за варианта с jquery!
    В случая имам клиент, който държи на флаша и бутончетата за бърза смяна на картинките. Ще ти обърна внимание, че дори кратката версия jquery-1.3.2.min.js е 56 KB срещу файла на флаш плеъра от 15 KB. Така че проблем със скоростта няма. Всъщност правя следния експеримент: под линукс с 4 различни браузъра отварям ту страница cms.cloxy.com, ту livadeto.com/vila и първата е доста по-тежка и държи процесора почти постоянно на 100%. Само под Opera е еднакво. Не знам как го правят, но работи в пъти по-добре от Firefox 🙂
    За индексирането на картинките си прав и затова съм започнал да правя отделна галерия.

  3. Много зависи от това какъв ти е процесорът. При мен Flash направо ми залепва мишката по екрана. Това на 5 годишен лаптоп. Затова избягвам да го използвам.

  4. Приемам, че е така - нямам време да го изследвам. По принцип аз също избягвам Flash, както личи от сайта ми. Ако тази статия беше на тема "Как се прави слайдшоу", сигурно щях да препоръчам да се ползва jquery, но тук се говори за "Преминаване към XHTML на съществуващ сайт с флаш", като флаша е изискване.

  5. Примерът е даден със .swf, а ако вкарвам видео от youtube? Как да си валидирам кода?

  6. Виж как е направено в http://ipotpalmax.com/2010/ипотпал-ревю-на-acer-aspire-1410-лаптоп/ Ползва се същата техника. Трябва ти да вмъкнеш файла http://ipotpalmax.com/js/swfobject.js и след това код подобен на:

    <div id="flashcontent1"></div>
    <p><script type="text/javascript">
    var so = new SWFObject("http://www.youtube.com/v/cIxd8iGTW3k",  "Описание на видеото", "480", "385", "7", "#FF6600"); so.write("flashcontent1");
    </script></p>
    

    В този случай ширината на прозореца на клипа е 480, а височината 385. Тези стойности, както и URL на клипа можеш да вземеш като отврориш видеото в youtube и отдясно в полето Embed ще видиш данните, които ти трябват.

  7. Ще го пробвам, но гледам, че пише вмъкване на SWF object, а на youtube файловете са с разширение .flv

  8. Мая, очакваш да те убеждавам ли? Показал съм ти работещ пример на точно това, което търсиш. Ако това не може да ти помогне, значи никой не може.

споделиха
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram