Фильтр по:
  

Кроссбраузерная ставка flash в HTML

Оптимизация дизайна сайта под различные браузеры ...

  • Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Оптимизация дизайна сайта под различные браузеры ... » Кроссбраузерная ставка flash в HTML (Различные способы и варианты вставки флеш на страницу)
Кроссбраузерная ставка flash в HTML
Дата: Четверг, 12.05.2011, 06:26 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

Вставка flash в HTML


Решение с использованием javascript библиотеки SWFObject v2.1


Code
<script type="text/javascript" src="http://yandex.st/swfobject/2.2/swfobject.min.js"></script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("6.0.0")) {<!-- указываем версию flash, на которой сделан ролик -->
var fn=function() {
var att={ data:"/_example/swf/test.swf", width:"200", height:"300" };<!-- указываем путь и имя flash-объекта, а так же его размеры -->
var par={
menu:"true", <!-- для пользователя даем возможность управлять анимацией -->
quality:"high", <!-- высокое качество -->
wmode:"opaque" <!-- чтобы можно было перекрыть flash -->
};
var id="replaceMe";<!-- id блока, куда будет вставлен flash -->
var myObject = swfobject.createSWF(att, par, id);
};
swfobject.addDomLoadEvent(fn);
};
</script>

Блок, в который будет вставлен flash, имеет альтернативный контент — это будет отображено при не установленном flash, либо при устаревшей версии. Для примера выведем альтернативную картинку и ссылку для установки свежей версии flash:


Code
<div id="replaceMe">
<img src="/_example/swf/test.gif" width="200" height="300" alt="Текст для поисковых роботов" />
<a href="http://www.macromedia.com/go/getflashplayer" target="_blank" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div>

☑ Пример вставки ...

Для вставки нескольких flash-объектов используем необходимое количество контейнеров и вызовов функции вставки:


Code
<script type="text/javascript" src="http://yandex.st/swfobject/2.2/swfobject.min.js"></script>
<script type="text/javascript">
if (swfobject.hasFlashPlayerVersion("6.0.0")){<!-- указываем версию flash, на которой сделан первый объект -->
var fn=function(){
var att={data:"/_example/swf/test.swf",width:"200",height:"300"};
var par={menu:"true",quality:"high",wmode:"opaque"};
var id="replaceMe";<!-- id блока, куда будет вставлен первый flash -->
var myObject=swfobject.createSWF(att, par, id);
};
swfobject.addDomLoadEvent(fn);
};
if (swfobject.hasFlashPlayerVersion("9.0.1")){<!-- версия flash второго объекта -->
var fn=function() {
var att={ data:"/_example/swf/test2.swf", width:"200", height:"400" }; <!-- второй объект -->
var par={menu:"true",quality:"high",wmode:"opaque"};
var id="replaceMe2"; <!-- блок для второго объекта -->
var myObject=swfobject.createSWF(att, par, id);
};
swfobject.addDomLoadEvent(fn);
};
</script>

Html
Code
<div id="replaceMe">
<img src="/_example/swf/test.gif" width="200" height="300" alt="Текст для поисковых роботов" />
<a href="http://www.macromedia.com/go/getflashplayer" target="_blank" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div>
<div id="replaceMe2">
<img src="/_example/swf/test.gif" width="200" height="300" alt="Текст для поисковых роботов" />
<a href="http://www.macromedia.com/go/getflashplayer" target="_blank" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div>

☑ Пример 2...
...

Инфо


  • недостаток метода — у пользователей у которых установлен flash, но отключен javascript, увидят только альтернативное содержимое
  • использование параметра wmode может привести к некотрым ошибкам работы flash (например, при wmode="transparent" нельзя ввести кириллические символы в поля ввода), используйте его только когда это действительно необходимо + хорошо потом тестируйте функциональность flash-объекта
  • в предыдущей версии метода использовалось значение transparent параметра wmode, от него пришлось отказаться, т.к. обработка прозрачности ведет к снижению производительности браузера

...

По теме:
» Project SWFObject (code.google.com)
» Внедрение Flash с помощью SWFObject 2 (designformasters.info)
» API → Хостинг JavaScript-библиотек (api.yandex.ru)
...

 
Дата: Четверг, 12.05.2011, 07:14 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

Вставка flash в HTML с использованием javascript библиотеки SWFObject v2.2


Почти тоже, что и в варианте выше, подключаем библиотеку, скачать которую можно на странице проекта SWFObject в Google Code или Хостинг JavaScript-библиотек от Яндекса.
Как и в предыдущем варианте, создаем HTML контейнер для flash с альтернативным содержимым:
Code
<div id="replaceMe">
<img src="/_example/swf/test.gif" width="200" height="300" alt="Текст для поисковых роботов" />
<a href="http://www.macromedia.com/go/getflashplayer" target="_blank" title="Перейти на сайт adobe для установки свежей версии flash">Установить свежую версию Flash</a>
</div>

При динамической вставке пишем скрипт, который вызывает функцию swfobject.embedSWF и передает ей параметры вставки flash-объекта. Это может выглядеть, например, так (демонстрационный пример взят из официальной документации):
Code
<script type="text/javascript">
var flashvars={};
flashvars.name1="hello";
flashvars.name2="world";
flashvars.name3="foobar";
var params={};
params.menu="false";
var attributes={};
attributes.id="myDynamicContent";
attributes.name="myDynamicContent";
swfobject.embedSWF("/_example/swf/314.swf","replaceMe","600","400","9.0.0","/_theme/_swf/_js/expressInstall.swf",flashvars,params,attributes);
</script>

☑ Пример «Вставка flash в HTML с использованием javascript библиотеки SWFObject v2.2»
...

Параметры и атрибуты вставки flash на страницу


Так как скрипт будет вставлять на страницу конструкцию object с вложенными param, необходимо передать ему параметры этой конструкции. Они делятся на три группы:
1. параметры непосредственно скрипта;
2. список элементов params вложенных в object.
3. атрибуты элемента object;

Имя параметраТип параметраОписание параметра
swfUrlString, обязательныйURL SWF файла
idString, обязательныйid HTML элемента (содержащего альтернативный контент) который должен быть заменен на Flash контент
widthString, обязательныйширина SWF
heightString, обязательныйвысота SWF
versionString, обязательныйверсия Flash плеера необходимого для данного SWF (формат: "major.minor.release")
expressInstallSwfurlString, необязательныйзадает URL для express install SWF и активирует Adobe express install. Обратите внимание, что express install срабатывает только один раз (при первом выполнении), требует Flash плеер версии 6.0.65 или старше на Win или Mac платформах. Минимально возможный размер SWF для его работы 310x137px.
flashvarsObject, необязательныйпеременные передаваемые Flash в виде пар имя:значение
paramsObject, необязательныйэлементы params вложенные в object в виде пар имя:значение
attributesObject, необязательныйатрибуты элемента object в виде пар имя:значение
callbackFnJavaScript функция, необязательныйможет быть использована для определения функции обратного вызова, оповещая об успешном или неуспешном внедрении файла SWF

...
Параметры перечисляются через запятую. Необязательные параметры можно пропускать, заменяя значением false. При этом замыкающие false можно не указывать.
Например вместо:
Code
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "false", flashvars, "false", "false", "false");

пишем просто:

Code
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0", "false", flashvars);

Параметры flashvars, params и attributes являются JavaScript объектами, их можно пропустить не только вышеуказанным методом, но и передав пустой объект:{}
...

params


Это те атрибуты, которые в нашем примере выглядят вот так:
Code
var params={};
params.menu="false";

Каждая пара имя:значение «развернется» скриптом в отдельный тег param.
...

Список элементов params вложенных в object и их значений



Для управления прозрачностью, часто применяется параметр wmode, для управления качеством — quality.
Code
var params={};
params.menu="false";
params.wmode="transparent";
params.quality="high";

attributes


Это те атрибуты, которые в нашем примере выглядят вот так:
Code
var attributes={};
attributes.id="myDynamicContent";
attributes.name="myDynamicContent";

Каждый из них станет атрибутом тега object, динамически вставленного на страницу.

Список атрибутов элемента object и их значений



Для flashvars, params и attributes существует сокращенный вариант записи, в одну строку, без создания дополнительных переменных, например так:
Code
<script type="text/javascript">
swfobject.embedSWF("/_example/swf/test.swf", "myContent", "300", "200", "9.0.0","/_theme/_swf/_js/expressInstall.swf", {}, {}, {id:"myDynamicContent",name:"myDynamicContent"});
</script>

...

Теперь посмотрим еще раз на демонстрационный пример, который, надеюсь, уже стал значительно понятнее.
Для удобства параметры записаны одной строкой.

Code
<script type="text/javascript">
swfobject.embedSWF("/_example/swf/test.swf", "replaceMe", "600", "400", "9.0.0","/_theme/_swf/_js/expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});
</script>

Тут всего-навсего написано: «Флешку из файла «/_example/swf/test.swf» вставить в HTML элемент c id="replaceMe".
Ширина флеша 600px, высота 400px.
Требуемая версия Flash плеера 9.0.0.
Для установки плеера при его отсутствии используем файл «/_theme/_swf/_js/expressInstall.swf».
В флеш передаем три переменных name1="hello" name2="world", name3="foobar".
Отображаем меню, которое содержит только настройки и опции Flash.
Созданному тегу object присваиваем id="myDynamicContent" и name="myDynamicContent"».

Источник: xiper.net

 
Дата: Четверг, 12.05.2011, 08:07 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown

Параметры для вставки Flash объектов в HTML


Для вставки объектов в HTML страницу используется тег object, для браузеров, которые не понимают object дополнительно применяется тег embed.

Когда применяешь эти теги сталкиваешься с массой различных параметров. Эти параметры служат для настройки отображения и работы вставляемого объекта. Например, довольно типичный вариант вставки флеша может выглядеть так:

Code
<object data="http://www.xiper.net/examples/flash/images/test.swf" type="application/x-shockwave-flash" height="300" width="200">
<param name="menu" value="true" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<div>Тест для поисковиков и браузеров не поддерживающих плагины</div>
</object>

Таких параметров довольно много. Чтобы не потонуть в дебрях param и object смотри таблички выше.

Для старых браузеров, которые не поддерживают object применяется тег embed.
Параметры у него сходные с object, а синтаксис немного отличается:

Code
<object data="http://www.xiper.net/examples/flash/images/test.swf" type="application/x-shockwave-flash" height="300" width="200">
<param name="wmode" value="transparent" />
<div>Тест для поисковиков и браузеров не поддерживающих плагины</div>
<embed type="application/x-shockwave-flash" src="http://www.xiper.net/examples/flash/images/test.swf" width="200" height="300" wmode="transparent"/>
</object>

Методы вставки flash в HTML


Двусоставной метод вставки flash в HTML


Метод характеризуется использованием двух тегов: object и embed, с перечислением необходимых параметров и атрибутов.
Code
<object width="600" height="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0">
<object width="600" height="400" type="application/x-shockwave-flash" data="/_example/swf/1.swf">
<param name="width" value="600" />
<param name="height" value="400" />
<param name="quality" value="high" />   
<param name="wmode" value="transparent" />   
<param name="movie" value="/_example/swf/1.swf" />   
<embed width="600" height="400" id="hello" src="/_example/swf/hello.swf"></embed>   
</object></object>

☑ Пимер «Двусоставной метод вставки flash в HTML»

Вставка flash на сайт двусоставным методом имеет свои очень весомые достоинства:

  • Полная и бескомпромисная кроссбраузерность
  • Установка флеш плагина прямо у вас на сайте, это очень важно, тк Вы не теряете посетителя, а может быть и клиента!

Из данного кода видны очевидные недостатки:

  • Дублирование параметров
  • Невалидность тега embed
  • Иррациональность
  • Использование необходимых, но малопонятных параметров типа classid и codebase

classid - при вставке flash это константа, всегда имеет значение clsid:d27cdb6e-ae6d-11cf-96b8-444553540000, это значение указывает на элемент ActiveX;
codabase - этот атрибут содержит ссылку на Flash-плеер, для установки плеера, если он отсутствует на компьютере пользователя;

Стоит отметить, при публикации флеш-ролика из программы Adobe Flash вставка swf-файла в HTML разметку осуществляется именно двусоставным методом.
...

Метод вложенных объектов


Метод характеризуется использованием двух тегов object, где один из них вложен в другой.
Code
<object width="600" height="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="movie" value="/_example/swf/1.swf" />
<param name="quality" value="high" />   
<param name="wmode" value="transparent" />  
<param name="src" value="/_example/swf/1.swf" />
<!--[if !IE]>--><object width="600" height="400" type="application/x-shockwave-flash" data="/_example/swf/1.swf"><!--<![endif]-->   
<param name="movie" value="/_example/swf/1.swf" />
<param name="quality" value="high" />   
<param name="wmode" value="transparent" />  
<param name="src" value="/_example/swf/1.swf" />
<div>Альтернативное содержимое</div>
<!--[if !IE]>--></object><!--<![endif]-->
</object>

☑ Пример «Метод вложенных объектов»

Вставка flash на сайт методом вложенных объектов имеет следующие плюсы:

  • Валидность и соответствие стандартам
  • Возможность показа альтернативного содержимого, если не установлен flash-плеер

Этот метод имеет много недостатков, такова цена валидности:

  • Дублирование параметров
  • Объемный код
  • Иррациональность
  • Использование условных комментариев (для обеспечения кроссбраузерности)
  • Не все браузеры предложат установить flash-плеер, при его отсутствии

Как видно из кода цена валидности действительно высока.
Соответствие стандартам, полезно ровно до тех пор, пока не нарушается кроссбраузерность, правильность отображения и удобство использования.
Если бы можно было обойтись одним тегом object, без дублирования параметров и атрибутов, веб-мастера не стали бы изобретать многочисленные "велосипеды".
Хотя использование условных комментариев (conditional comments) валидно, вряд ли кто-то скажет, что это действительно удобно.
...

Вставка флеш на сайт методом Flash Satay


Метод характеризуется, использованием тега object, минимализацией кода вставки flash на сайт и использованием, при необходимости, дополнительного флеш-загрузчика (прелоадера).

Основная идея заключается в избавлении веб-мастеров от необходимости использовать тег embed, вместе с тем отбрасывая необходимость дублировать параметры и делая код валидным.

Code
<object data="/_example/swf/1.swf" type="application/x-shockwave-flash" height="400" width="600">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="movie" value="/_example/swf/1.swf" />
<div>Тест для поисковиков и браузеров не поддерживающих плагины</div>
</object>

☑ Пример «Вставка флеш на сайт методом Flash Satay»

Вставка флеш на сайт методом Flash Satay, достаточно оптимизирована и удобна. Метод хорошо подойдет для легких flash-роликов (например flash баннеров), если флеш-контент весит много Мб или должен быть расчитан и на аудиторию с низкой скоростью интернета, то нужно использовать загрузчик, в который передается путь к основному файлу.
Это связано с особенностью данного метода, флеш содержимое будет отображено только после полной загрузки.
Стоит отметить, что для большинства флеш приложений так или иначе нужно использовать прелоадер. В данном слечае путь к загружаемому файлу передается через атрибут data и Get-переменную data="c.swf?path=myContent.swf", можно передавать пусть и другими способами, например, через FlashVars.

Плюсы использования метода Flash Satay:

  • Валидная вставка flash в HTML
  • Кроссбраузерная вставка flash в HTML
  • Возможность показа альтернативного содержимого

Минусы вставки флеш методом Flash Satay:

  • Отображение флеш-контента только после полной загрузки
  • Необходимо использовать прелоадер (загрузчик) для тяжелых флеш роликов и приложений
  • Необходимо передать путь загружаемого флеш ролика
  • Не все браузеры предложат установить flash-плеер, при его отсутствии

Вставка Flash на сайт методом SWFObject


Об этом методе написано выше.
...
При вставке тега object в HTML, а также динамической вставке flash с помощью SWFObject, может использоваться уйма разных параметров.
Грамотный HTML кодер должен разбираться в этой теме. А начинающим,поможет данный материал.

 
Дата: Суббота, 15.02.2014, 18:38 |
arhitec
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


 Прошу о помощи!
Перечитал вашу статью, уж самое лучшее, что смог найти в сети.
Однако почему-то мой flash не хочет отображаться на странице.
Вот ссылка: http://www.auto-number.biz/noname.html
Сейчас стоит самый простой способ вставки. Перепробовал почти все Ваши варианты, но флэш так и не отображается.
Однако на локальной машине у меня все работает. Может причина в самом файле?
Путь проверял, все совпадает. Специально в корень сайта вкладываю файл.
Помогите, пожалуйста. За ранее благодарен.

 
Дата: Воскресенье, 16.02.2014, 06:02 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


 arhitec,
Цитата arhitec, Сб, 15.02.2014, 18:38:56
Вот ссылка: http://www.auto-number.biz/noname.html

Нет в корне сайта файла 314.swf

 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Оптимизация дизайна сайта под различные браузеры ... » Кроссбраузерная ставка flash в HTML (Различные способы и варианты вставки флеш на страницу)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия