Вставка флеш-контента на сайт

Вставка Flash-контента

Вторник, июня 16, 2009 21:27

Flash Представляю небольшой обзор методов вставки flash на веб-страницы. Думаю, такая необходимость периодически возникает у многих, но возможно не все знают как это сделать.

Плагин для Wordpress

При вставке flash в блог на Wordpress cамый простой способ использовать плагин. Советую использовать WP-SWFObject. Данный плагин очень прост в применении, использует библиотеку SWFObject(описана ниже). Вставка flash в пост блога осуществляется следующим способом:

[SWF]movie.swf, width, height[/SWF]

movie.swf - путь к файлу вашей флешки, width, height - ширина и высота флешки. Можно также передать флешке дополнительные переменные:

[SWF]movie.swf, width, height, var1=val1&var2=val2[/SWF]

Если нужно вставить флешку не в пост, а в код Wordpress (например, вставить flash-баннер в сайдбар), можно вопользоваться специальной фукцией:

<?php wp_swfobject_echo("movie.swf", "width", "height"); ?>

В общем все просто.

Вставка с помощью библиотеки SWFObject

SWFObject это специальная Javascript библиотека, предназначенная для вставки flash-роликов на веб-страницы. Использование SWFObject дает ряд преимуществ по сравнению с обычной вставкой flash ручками с помощью разметки.

Во первых, это кроссбраузерность. Также SWFObject позволяет проверить версию flash-плеера, установленную у пользователя и, при необходимости, предложить обновиться. С помощью SWFObject можно задать альтернативный контент, который будет показываться в случае если у пользователя не установлен flash-плеер. Не буду расписывать все преимущества данной библиотеки, тем более, что это уже сделано до меня и очень хорошее описание библиотеки есть здесь.

SWFObject позволяет внедрить flash на страницу двумя методами: статическим и динамическим.

Статический метод

Flash-ролик внедряется с помощью обычной разметки. Javascript при этом используется только для того чтобы избежать проблем с некоторыми браузерами. Преимущество этого способа в том, что флеш-контент будет отображен даже в том случае, если в браузере пользователя будет отключен Javascript.

Пример использования статического метода представлен ниже. В заголовке документа подключаем скрипт swfobject.js и регистрируем нашу флешку с помощью функции swfobject.registerObject.

<html>
  <head>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
      swfobject.registerObject("myFlashContent", "9.0.0");
    </script>
  </head>
  <body>
    <div>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="myFlashContent">
        <param name="movie" value="flash.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
        <!--<![endif]-->
          <p>Альтернативный контент</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

Здесь я сделаю важное замечание. Если вы не хотите использовать Javascript и хотите использовать только стандартную разметку, то при вставке флешки используйте данный код, только без подключения скриптов.

Динамический метод

При использовании динамического метода на странице создается элемент с уникальным ID, внутрь которого вставляется только альтернативный контент. При наличии поддержки Javascript, альтернативный контент в данном элементе будет заменен на флеш-контент. Пример представлен ниже. В заголовке HTML-документа подключаем скрипт swfobject.js и скрипт активации флеш-контента.

<html>
  <head>
    <script type=”text/javascript” src=”swfobject.js”></script>
    <script type=“text/javascript”>
      swfobject.embedSWF(“flash.swf”, “myAlternativeContent”, “800″, “600″, “9.0.0″, false, flashvars, params, attributes);
    </script>
  </head>
 
  <body>
    <div id=”myAlternativeContent”>
      <p>Альтернативный контент</p>
    </div>
  </body>
</html>

Вставка flash с помощью разметки

В этом пункте я, по сути дела, вынужден повториться. Для вставки флешки с помощью стандартной разметки, нам просто нужно использовать тот же код, который используется в статическом методе внедрения при использовании SWFObject:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600">
    <param name="movie" value="flash.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash.swf" width="800" height="600">
    <!--<![endif]-->
      <p>Альтернативный контент</p>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

В заключении хочу добавить, что лично я в блогах использую плагин, так как это проще всего. В остальных случаях, думаю лучше все таки подключать флешки с помощью SWFObject, а метод внедрения, статический или динамический, выбирать в зависимости от особенностей вашей странички.

Вы можете следить за развитием темы при помощи ленты RSS 2.0 .

Метки: flash, Javascript, WordPress, плагины

8 коммент. к “Вставка Flash-контента”

Vootshi пишет:

20 июня 2009 в 13:19

о-пля, первый наФ (сменим последнюю букву, а то вдруг анти-мат стоит ))))

драсте, благодарен за ссылку на плагин, оч. пригодился, прям нарадоватьс не могу, НО возник вопрос - как правильно прописать в том же посте, ну и за одним в сайдбаре, с тегом <a href…

я чота пробую - ничего не получается, с ВП я на ВЫ ))))

будьте любезны, помогите советом )))
Dimon пишет:

22 июня 2009 в 18:56

@Vootshi, думаю что с помощью данного плагина это сделать не получится…
Александр пишет:

13 августа 2009 в 18:44

У Вас ошибочка: “heigth”, а надо “height”. Пустяк, конечно, всё равно цифрами заменять.
Dimon пишет:

14 августа 2009 в 9:29

Александр, спасибо поправил.
oldoctober.com пишет:

8 декабря 2009 в 1:49

“Можно также передать флешке дополнительные переменные:
var1=val1&var2=val2″ - Вы могли бы пояснить это для тех, кто в танке? Возможно ли это использовать. чтобы появились кнопки меню в плеере при прокрутке панорамы или чтобы можно было активировать “controller1.swf”, который создаётся вместе с файлом панорамы и вставляет кнопочки о обычный Флэш плеер? Спасибо!
nikola пишет:

15 декабря 2009 в 17:55

А не проще ли прямо в пост (код) вставить :

Мне кажется замарочек меньше. Загрузил файл sayt.swf, указал в коде адрес и всё.
Татьяна пишет:

17 апреля 2010 в 17:11

Здравствуйте.
Подскажите пожалуйста как сделать так что бы флеш ролик был на заднем плане? сейчас он у меня всплывающее меню перекрывает, Z-index помог но работает только в мазиле, а что делать с оперой и сафари.
Андрей пишет:

16 июля 2010 в 8:54

Как прописать прозрачный (вместо белого по умолчанию) фон.
Спасибо.

Блог вебмастера