Способи вставки Flash в HTML і XHTML

1. Основні компоненти методу вбудовування Flash-об'єктів
2. відповідність стандартам
3. Межбраузерная підтримка
4. Підтримка альтернативного вмісту
5. Уникнення невідповідності між Flash-контентом і версією Flash-плеєра
6. Автоактівація інтерактивного контенту
7. простота реалізації
8. Основи вбудовування Flash-об'єктів: embed і object
9. Чому embed все ще використовується
10. Де порушена підтримка веб-стандартів
11. Чому object краще, ніж embed
12. Недостатність методів розмітки
13. двусоставний метод
14. Метод вкладених об'єктів
15. Flash Satay
16. Аргументи на користь DOM
17. Будьте обережні, використовуючи JavaScript
18. Комплект по визначенню плеєра Adobe Flash
19. UFO і SWF Object
20. Аргументи на Користь "помірного" програмування DOM
21. Майбутнє вбудовування Flash

Версія для друку

"Як правильно вставити об'єкти Flash в вашу HTML-сторінку?"

Це повинно бути просте питання, але ймовірно викликає безліч суперечок, так як кожен з доступних способів вбудовування об'єктів має свої переваги і недоліки. У цій статті ми досліджуємо труднощі і тонкощі вбудовування Flash-вмісту і розглянемо найбільш популярні способи вставки об'єктів.

Основні компоненти методу вбудовування Flash-об'єктів

Перш ніж перейти до практики, давайте спочатку охарактеризуємо ідеальний метод. На мою думку, такі критерії мають першорядне значення.

відповідність стандартам

Web-стандарти пропонують універсальна мова для творців браузерів, проектувальників обладнання та веб-дизайнерів для того, щоб вони могли уникнути проблем сумісності, залежно від виробників, а також порушення патентних прав. Крім того веб-стандарти дозволяють створювати правильну HTML-розмітку, яка до того ж часто є вимогою в веб-проектах.

Межбраузерная підтримка

Повна підтримка усіма основними браузерами і популярними операційними системами - це необхідна умова. Перевірити розмітку можна за допомогою інструментарію Flash embed test suite , Який дозволяє оцінити, чи підтримують браузери той чи інший метод розмітки, за допомогою якої можна вставити Flash-об'єкти. Цей набір тестів може показати інформацію про параметрах, в тому числі різних настройках Flash, потоках і сценаріях, підтримуваних браузерами і ОС. Ви також можете вивчити зведену таблицю, яка буде показувати ці параметри.

Підтримка альтернативного вмісту

У всіх випадках, коли ви створюєте вміст, сприймається пошуковими машинами або доступне людям, які використовують Веб без установки будь-яких плагінів, використання альтернативного вмісту - це найкраще рішення.

Уникнення невідповідності між Flash-контентом і версією Flash-плеєра

На жаль для багатьох з нас, Flash-контент буде відтворюватися незалежно від версії Flash-плеєра, для якого він був створений. У цьому немає нічого страшного до того моменту, поки застарілий плагін не виявить функції, які працюють тільки в його більш пізніх версіях. Якщо так станеться, ваші відвідувачі побачать "порушене" вміст або зовсім нічого не побачать.

Автоактівація інтерактивного контенту

Браузери компанії Microsoft працюють так, що відвідувачі не можуть безпосередньо взаємодіяти з елементами управління Microsoft ActiveX, який дозволяє завантажувати об'єкти і елементи embed, також звані "інтерактивним контентом".

простота реалізації

Звичайно ж простота має значення. Навіщо стрибати вище голови, якщо можна зробити простіше?

Основи вбудовування Flash-об'єктів: embed і object

Існують два елементи HTML, які дозволяють вставити об'єкти Flash на веб-сторінку. В одній руці, у нас є запатентований елемент embed, який підтримується більшістю браузерів:

В іншій руці у нас елемент object, який є рекомендацією W3C. Так як специфікації W3C надають більше можливостей для відображення підключається контенту, згодом з'явилися два різні способи реалізації об'єктів.

Більшість сучасних браузерів вибрали стандартом альтернативу тегу embed, використовуючи при цьому MIME-тип об'єкта, щоб підключити відповідний плагін для відтворення вмісту:

Цей метод не прив'язаний до якогось певного браузеру і тому це краща реалізація.

Другий спосіб реалізації створений спеціально для Internet Explorer на Windows. При цьому потрібно, щоб ви визначили атрибут classid у об'єкта, щоб браузер зміг завантажити необхідний елемент управління ActiveX Flash-плеєра. Такий спосіб допустимо, але залежний від типу браузера:

Зауваження: У двох останніх прикладах коду спеціально не вказано параметр codebase - він часто використовується, щоб уточнити URL інсталятора Flash на серверах Adobe (браузер може автоматично завантажити його, якщо він ще не встановлений). Однак це заборонено відповідно до специфікації, які обмежують його доступ тільки в межах домену поточного документа, і тому цей параметр не підтримується всіма сучасними браузерами.

Чому embed все ще використовується

З появою веб-стандартів можна було б цілком обгрунтовано видалити елемент embed. Він просто ніколи не був рекомендацією W3C і ніколи не буде, тому що він вже запатентований. Однак насправді цей спосіб краще підтримується браузерами, ніж окрема реалізація елемента object. В результаті такої спосіб реалізації обраний на більшості веб-сайтів, таких як Google Video і Brightcove.

Хоча веб-стандарти створені, щоб уникнути проблем сумісності, елемент embed більш зрозумілий і недвусмислен, ніж елемент object, схвалений W3C. Жорсткі правила реалізації елемента embed і хороша підтримка перетворила його в фактичний стандарт, який буде використовуватися до тих пір, поки не буде універсальної підтримки елемента object, достатньою для того, щоб ігнорувати версії браузерів, які його не підтримують.

Де порушена підтримка веб-стандартів

Подвійна реалізація елемента object формально не порушує веб-стандарти, але створює безліч проблем. Отже, нам потрібно знайти спосіб об'єднати два методи реалізації об'єктів в один. Ще гірше те, що ми також повинні розібратися з браузерами, які мають (або раніше мали) неправильну реалізацію об'єктів. Давайте розглянемо ці проблеми:

• Загальна реалізація об'єктів не працює в Internet Explorer на Windows. IE завантажує плагін і SWF-файл, але не показує його вміст.
• Коли ми частково об'єднуємо два способи реалізації додаванням параметра movie до загальної реалізації, Internet Explorer відображає Flash-контент, але не програє його.
• Якщо ми повністю з'єднаємо дві реалізації, все запрацює в Internet Explorer, але браузери на базі Gecko проігнорують Flash-контент та покажуть альтернативне вміст.

Однією з особливостей елемента object є те, що ви можете вставляти цей тег один в одного:

На жаль, через помилки в старих версіях Internet Explorer вбудовані один в одного елементи object розглядаються так, як ніби вони йдуть один за іншим, тому відображаються обидва елементи.

Ще гірше те, що браузери Safari, починаючи з версії 1.2.2 для Mac OS 10.3, ігнорують елемент param, вбудований в object, хоча підтримують такі ж атрибути для елемента embed.

Зауваження: Ви також можете запитати, наскільки розумно визначати контент, атрибути і параметри двічі, як в вищевикладеному способі. Цей комбінований метод також робить більш проблематичним використання JavaScript для взаємодії з Flash-контентом. В такому випадку ви повинні перевіряти, з яким об'єктом ви взаємодієте.

Деякі з помилок вже виправлені, але не загальноприйняті і помилкова в Internet Explorer реалізація object все ще стримує абсолютне прийняття цього елемента. Ми можемо тільки сподіватися, що це буде виправлено в найближчому майбутньому.

Чому object краще, ніж embed

Незважаючи на відсутність підтримки всіма браузерами елемент object все ж більш кращий, ніж елемент embed, тому що крім відповідності стандартам, він також володіє чудовою підтримкою альтернативного вмісту.

Елемент object дозволяє вбудовувати альтернативне вміст, і це вміст відображається, якщо реалізація не підтримується або не встановлений плагін. Також альтернативне різноманітні опції відображаються пошуковим машинам, а це незаперечний плюс при оптимізації під пошукові запити.

Елемент embed підтримує альтернативне вміст за допомогою елемента noembed, але така реалізація працює тільки в тих браузерах, які не підтримують сам елемент embed, наприклад Internet Explorer на платформах Windows Mobile. На відміну від елемента object, embed не підтримує альтернативне вміст, коли підтримується сам елемент embed, але не встановлений Flash-плагін. У такій ситуації, можна задовольнятися лише атрибутами pluginurl і pluginspage, за допомогою яких відображається картинка, клікнувши по якій можна встановити плагін.

Я думаю, це найкраще рішення для відображення альтернативного контенту, щоб описати необхідний плагін і дати натяк на те, що користувач може завантажити і встановити плагін Flash. (Тим не менш, ні інших причин, за якими ми повинні зловживати атрибутом codebase.)

Таким чином, елемент object володіє значними перевагами перед елементом embed в тому випадку, якщо ви віддаєте перевагу створювати відповідний стандартам код або доступне, добре индексируемое пошуковими системами вміст.

Недостатність методів розмітки

Беручи до уваги критерії, визначені нами раніше, - відповідність стандартам, межбраузерную підтримку, підтримку альтернативного вмісту, щоб уникнути невідповідностей плейер / контент, автоконтроль інтерактивного вмісту і простоту реалізації - легко зрозуміти, що насправді використовуються лише ті способи реалізації, які можуть бути здійснені тільки зміною розмітки.

Хоча розмітка надає кошти показу Flash-контенту або альтернативного вмісту, вона не здатна вирішити проблеми невідповідності контенту і плагіна Flash або помилки при активізації інтерактивного контенту, і це не завжди найпростіший спосіб вирішити і ту, і іншу проблему.

Однак, давайте зробимо короткий огляд найбільш популярних "комбінованих" методів встраніванія Flash, здійснюваних за допомогою (X) HTML-розмітки.

двусоставний метод

У Flash IDE, ви можете створювати HTML-сторінки за допомогою так званого двусоставного методу, що об'єднує реалізацію об'єктів за допомогою елемента object і embed, вбудованого всередині нього як альтернативний контент:

Як бачите, цей метод заснований виключно на запатентованій розмітці. Він безсумнівно фокусується на межбраузерной підтримки, але не відповідає стандартам.

Двусоставний метод використовує надлишковий код, робить ваші веб-сторінки логічно непослідовними і не дозволяє вставити альтернативне вміст. А єдина перевага - це простота у використанні, так як його генерує Flash IDE: так що не намагайтеся просити відтворити цей метод по пам'яті.

Метод вкладених об'єктів

Вкладення двох реалізацій об'єктів - хороша альтернатива двусоставности методу, тому що цей метод відповідає стандартам і підтримує альтернативний контент:

На жаль, в цьому методі відсутній межбраузерная підтримка внаслідок помилки вкладення елементів object в IE і відсутності підтримки вкладених елементів param в Safari. Але можна використовувати прийом з умовними коментарями IE, щоб уникнути помилок браузера:

При використанні наведеного вище "роздутого" коду, цей метод стає навіть більш складним для творця, ніж двусоставний. Він використовує потворні виверти, які можуть ускладнити процес створення коду при використанні серверних мов.

Flash Satay

Інша альтернатива - це метод Flash Satay , Який заснований на загальному способі реалізації об'єктів і включає додатковий параметр movie. Цей параметр необхідний, щоб уникнути помилок відображення контенту в IE. Він також включає movie-контейнер Flash (c.swf зі змінною path), щоб виправити помилку з потоковим відтворенням в IE:

Хоча він наближає нас до "ідеального", універсального способу реалізації об'єктів, Flash Satay містить прийоми, застосування яких не підійде кожному? і при використанні цього методу вбудовані елементи param не підтримуються старими версіями Safari.

Аргументи на користь DOM

Коли ви думаєте про недостатність методів розмітки, ви можете поцікавитися, чому не можна використовувати скрипти DOM. За допомогою них, ми можемо динамічно управляти розміткою, як того вимагає кожен браузер, використовуючи:

• спеціальну реалізацію для IE;
• запатентований елемент embed для старих версій Safari;
• загальну реалізацію для всіх інших браузерів.

Скрипт DOM до того ж гнучкий інструмент, достатній для вирішення інших проблем: перш за все, ми можемо використовувати його для вирішення проблеми несумісності Flash-плеєра і Flash-контенту, визначаючи версію плагіна і перевіряючи те, що потрібно показувати - Flash-контент або альтернативне вміст . Коли необхідна версія плагіна недоступна, ми можемо ініціювати експрес-установку Adobe, - механізм вбудований в Flash-плейер. Тим самим ми спрощуємо завантаження потрібної версії.

Рішення із застосуванням DOM також дозволяє нам уникнути механізму "click-to-activate" за допомогою динамічного створення елементів object.

Будьте обережні, використовуючи JavaScript

Так як не кожен є досвідченим фахівцем з JavaScript - та й навіть той, хто їм є, не повинен заново винаходити велосипед - непогано використовувати вже існуючі бібліотеки JavaScript для вбудовування Flash. Давайте розглянемо критерії вибору надійної бібліотеки.

Розмітка за стандартами рідко підтримується творцями бібліотек, так як ці бібліотеки визначають Flash-контент або в JavaScript, або іншими засобами розробки. Більшість бібліотек створюють неправильний HTML і, так як розмітка написана динамічно, W3C-валідатор не здатний її перевірити.

З іншого боку потрібно розглянути, як працює такий метод, якщо JavaScript не доступний, що не підтримується або підтримується тільки частково. Що робити, якщо використовуючи JavaScript, ви обмежуєте доступність контенту для користувачів?

Прийнявши до уваги вищесказане, давайте подивимося, як працюють деякі популярні бібліотеки.

Комплект по визначенню плеєра Adobe Flash

Крім створення розмітки в Flash IDE, Adobe також надає комплект по визначенню плеєра Flash . Існує три способи використовувати цей комплект:

1. Перевіривши встановлений чи ні прапорець Detect Flash Version (в меню File> Publish Settings> HTML) в Flash 8 IDE.
2. Вставивши його вручну, завантаживши дистрибутив цієї бібліотеки.
3. Працювати в Flex Builder 2, де він включений за замовчуванням.

Хоча пакет дає нам всі бажані можливості, такі як визначення версії, експрес-установка і автоактівація інтерактивного контенту, він потребує удосконалення. Коли ми повністю перейдемо до стандартів, його чекає безнадійний провал: поки що він заснований на двоскладного розмітці, так як має або реалізацію об'єктів від Microsoft, або підтримку запатентованого елемента embed, яке не відповідає стандартам.

Він також підтримує альтернативний контент, хоча дивним і суперечливим чином. Ви повинні визначити альтернативний контент двічі: в JavaScript і в елементі noscript.

В кінцевому рахунку, комплект за визначенням плеєра потребує кращої реалізації.

UFO і SWF Object

Популярні альтернативи з відкритим вихідним кодом, як UFO Боба ван дер Слуіса і SWF Object Джеффа Стірнс напевно найповніші і прості у використанні бібліотеки, доступні в даний час.

Хоча на перший погляд вони здаються схожими, вони повністю відрізняються внутрішнім змістом. Наприклад, SWF Object використовує двусоставний метод Adobe, в той час як UFO генерує головним чином відповідає стандартам розмітку. З іншого боку вони використовують загальні архітектурні принципи: обидві бібліотеки побудовані на ідеї створення розмітки, підтримує альтернативне вміст (таким чином доступне і оптимізоване під пошуковики), яке заміщується DOM-скриптом, коли доступна необхідна підтримка Flash і JavaScript.

Незважаючи на їх явну підтримку альтернативного вмісту, обидві бібліотеки мають один суттєвий недолік: вони залежать від JavaScript при вставці Flash-контенту. В результаті невелика група відвідувачів, яка встановила Flash плагін, але з відключеним JavaScript або з відсутністю достатньої підтримки JavaScript, будуть бачити тільки альтернативне вміст.

Аргументи на Користь "помірного" програмування DOM

Щоб вирішити всі проблеми, цілком логічно використовувати наступний метод вставки: змішану розмітку, сумісну зі стандартами, як та, яка використовується методом Flash Satay, щоб включити і Flash-контент, і альтернативне вміст, поряд із застосуванням невеликого DOM-скрипта, який необхідний для усунення проблем в деяких браузерах.

ObjectSwap заснований на цих принципах і на мій погляд є зразком для майбутніх бібліотек вбудовування Flash-об'єктів. На жаль, ObjectSwap концентрується в основному на автоактіваціі інтерактивного контенту, тому він не придатний для визначення версії і не вирішує проблем з розміткою, таких як підтримка потокового відтворення в IE або підтримка параметрів в старих версіях Safari.

З іншого боку він може бути вдосконалений. При використанні події onload, поведінка, заснована на DOM, реалізується тільки після завантаження всієї сторінки. Кращим вибором могло б бути подія DOMContentLoaded, яке дозволяє вам застосувати свою власну поведінку, як тільки DOM стане доступний на сторінці. Так як подія DOMContentLoaded ще не повністю підтримується браузерами, замість цього ви можете використовувати це рішення .

Майбутнє вбудовування Flash

Хоча досконале рішення поки що не знайдено, ми вже досить далеко просунулися в правильному напрямку. Коли ми з'єднуємо кращі можливості різних бібліотек, нам слід враховувати всі критерії, визначені на початку цієї статті.