Study & Dev | Blog Archive | Анимация и эффекты в javascript с помощью mootools. Часть 2

Внедрение flash-видео и swf-файлов внутрь medawiki сайта

January 13, 2008

Для своего сайта я разработал расширение для mediawiki позволяющее внедрить flv или swf-файлы в страницу.

Прежде всего я провел краткий и не утешительный анализ существующих решений в этой области. На сайте mediawiki нашлось несколько похожих решений, но:

Некоторые из решений предполагали вставка flv-файла загружаемого с yourtube.
Вставка swf-файлов выполнялась без учета версии браузера (одна баг-версия ориентировалась только на mozilla) и без возможностей передавать swf-ке произвольные параметры, управлять версией нужного для проигрывания контента flashplayer.
Нет возможности корректно обработать ситуацию, когда у клиента нет plashplayer.

Принятно решение на основе javascript-библиотеки swfobject (решение которым пользуются продвинутые flash/flex программеры при вставке swf-файлов внутрь своих страниц) создать расширение для mediawiki.

1. для поддержки загрузки flv и swf на сервер (посредством стандартного Special:Upload) необходимо добавить в массив $wgFileExtensions новые расширения типов.

$wgFileExtensions = array( 'png', 'gif', 'jpg', 'jpeg' , 'swf', 'flv');

2. Даже после того как я разрешил в предыдущей строке загружать файлы с расширениями swf и flv возникли проблемы. Так при загрузке flv-файла я получал сообщение, что файл поврежден или его mime-тип неизвестен. Для этого я решил во все файлы используемые при загрузке файлов на сервер добавить поддержку нового mime-типа.

 <strong>2.1.</strong> В файле includes/mime.types проверено на наличие и добавлено если необходимо:
   application/x-shockwave-flash swf
   video/x-flv flv
 <strong>2.2.</strong> В файле includes/mime.info проверено на наличие и добавлено если необходимо:
   application/x-shockwave-flash	[MULTIMEDIA]
   video/x-flv	[MULTIMEDIA]
 <strong>2.3.</strong> В файле includes/SpecialUpload.php в функции

function verifyExtension( $mime, $extension ) {

  добавлена первой строка кода:
   if ($extension == 'flv') return true;

3. В папку extensions скопирована папка swfflv с кодом расширения.

 <strong>3.1.</strong> Подключено расширение внутри файла LocalSettings.php
    require_once("extensions/swfflv/setup.php" );

4. Для корректной работы расширения необходимо подключить к генерируемомому содержимомоу библиотеки swfobject и jquery.

В файле swfflv/setup.php найдите следующие строки

```
return 
```
```
'
```

<script type="text/javascript" src="'.$path_TO.'swfobject.js"> </script>

<script type="text/javascript" src="'.$path_TO.'jquery-1.2.1.pack.js"> </script>

<script type="text/javascript" src="'.$path_TO.'swf_and_flv_process.js"> </script>

```
';
```

 в том случае если у вас уже используются и подключены библиотеки swfobject.js и jquery, то вы можете исправить путь к ним на корректный.
 В противном случае делать ничего не нужно.

5. Использование библиотеки. Внутри документа используйте теги swf и flv для вставки flash-содержимого.

Например:

Это пример swf-файла

<swf width="200" height="200" fio="billi" age="13" bgcolor="#ff00ff" dummy="dummy_pic1.jpg">Untitled-1.swf</swf>

Это пример flv-файла

<flv width="500" height="500" fio="mark" dummy="/blog/wp-content/uploads/mediawiki/posters/Flvswf/dummy_pic2.jpg">/blog/wp-content/uploads/mediawiki/video/Flvswf/Nes in russia get video.flv</flv>

Обратите внимание на указание для swf и flv-файлов размеров, также заглушки (dummy). Заглушка - это картинка которая будет показана в том случае если flashplayer на машине клиента не обнаружен.

Также можно использовать следующие параметры (специфические для swfobject)

  * wmode
  * quality
  * useExpressInstall
  * redirectUrl
  * xiRedirectUrl
 Все параметры, имена которых не совпадают с зарезервированными width, height, bgcolor, wmode, quality, useExpressInstall, redirectUrl, xiRedirectUrl, будут переданы как параметры внутрь swf-файла.

Не забудьте загрузить на сервер файлы Untitled-1.swf, dummy_pic1.jpg,Nes in russia get video.flv, dummy_pic2.jpg

В том случае если вы это не сделаете, то будет сгенерирована ошибка.

Если же все сделать правильно, то вы получите следующий результат:

Пример работы swfflv плагина

Это пример swf-файла

Это пример flv-файла

Исходники для swfflv плагина

https://github.com/study-and-dev-site-attachments/all-in-one/tree/master/php/swfflvz

Правки для mediawiki 13

Для того чтобы данный код заработал для mediawiki 13 необходимо после того как вы загрузили исходники плагина заменить файл setup.php на новую версию:

// добавляем в список функций установки расширений свою собственную

$wgExtensionFunctions[] = 'SwfAndFlvSetup';

```
 
```

// когда функция "установки" будет вызвана, то нужно зарегистрировать все используемые теги

$wgExtensionCredits['parserhook']['SwfAndFlvSetup'] = array(

```
	'name'          => 'SwfAndFlvSetup',
```
```
	'author'        => 'black zorro',
```

	'description'   => 'embed into mediawiki pages swf and flv files',

```
);
```
```
 
```
```
function SwfAndFlvSetup() {
```
```
	global $wgParser;
```

	$wgParser->setHook( 'swf', 'swfflvHook' );

	$wgParser->setHook( 'flv', 'swfflvHook' );

```
}
```
```
 
```

// возможно, что на одной странице будет расположено несколько swf или flv-файлов,

// очевидно, что нет необходимости каждый раз возвращать полный фрагмент с подключением нужных js-библиотек

```
function got_js_for_swf_flv (){
```
```
  static $loaded = false;
```
```
  if ( $loaded ) {
```
```
	return '';
```
```
  }
```
```
  $loaded = true;
```
```
  global $wgScriptPath;
```
```
 
```
```
  $scn = getSCN ();
```

  $path_TO = $scn . '/extensions/' . basename (dirname (__FILE__) ) . '/';

```
 
```
```
  return 
```
```
'
```

<script type="text/javascript" src="'.$path_TO.'swfobject.js"> </script>

<script type="text/javascript" src="'.$path_TO.'jquery-1.2.1.pack.js"> </script>

<script type="text/javascript" src="'.$path_TO.'swf_and_flv_process.js"> </script>

```
';
```
```
}
```
```
 
```

function swfflvHook( $text, $params = array(), $parser ) {

```
   $scn = getSCN ();
```
```
   $text = trim ($text);
```
```
   $attrs = '';
```
```
   foreach ($params as $key => $val){
```
```
      if ($key != 'dummy')
```

        $attrs .= $key .  ':"' . $val. '", ';

```
   }
```
```
 
```

   $title_swf = Title::newFromText( $text , NS_IMAGE );

```
   if ( $title_swf == null ) 
```

	return "SWF|FLV File not found (".$text.")";

```
 
```

   $file_swf = wfFindFile( $title_swf );

   if ( $file_swf && $file_swf->exists() ) {

```
	$url_file = $file_swf->getURL() ;
```
```
   } else {
```

     return "SWF|FLV File not found (".$text.")";

```
   }
```
```
 
```

   $url_player = $scn . '/extensions/' . basename (dirname (__FILE__) ) . '/flvplayer.swf';

```
   $dummy_url = '';
```
```
 
```
```
   if (isset($params['dummy'])){
```

     $title_dummy = Title::newFromText( $params['dummy'] , NS_IMAGE );

```
     if ( $title_dummy == null ) 
```

	return "SWF|FLV Dummy File not found (".$params['dummy'].")";

```
 
```

     $file_dummy = wfFindFile( $title_dummy );

     if ( $file_dummy && $file_dummy->exists() ) {

```
	$dummy_url = $file_dummy->getURL() ;
```
```
     } else {
```

      return "SWF|FLV Dummy File not found (".$params['dummy'].")";

```
     }
```
```
 
```
```
   }
```
```
 
```

   $filenamelen = mb_strlen($text, 'utf-8');

   $kind = mb_substr ($text, $filenamelen - 3, 3, 'utf-8');

```
   $id = $kind.'_'.md5($text);
```
```
 
```

   $attrs .= ' __filesource:"'.$url_file.'", __flvplayer:"'.$url_player.'", __dummy:"'.$dummy_url.'" ';

   $tag = '<div id="'.$id.'" style=""><!-- empty --></div><script>var '.$id. ' = {'.$attrs.'};</script>';

```
 
```
```
   $js = got_js_for_swf_flv ();
```
```
   return $js . $tag;
```
```
}
```
```
 
```
```
function getSCN (){
```
```
   $scn = $_SERVER['SCRIPT_NAME'];
```
```
   $scn = explode ('/', $scn);
```
```
   array_pop ($scn);
```
```
   $scn  = join ('/', $scn);
```
```
   if (! $scn ) return '/';
```

   return ( substr($scn, 0, 1) == '/'?'':'/' ) . $scn;

```
}
```

Categories: Разные мелкие утилитки

Study & DevО программировании и не только

Внедрение flash-видео и swf-файлов внутрь medawiki сайта

Пример работы swfflv плагина

Исходники для swfflv плагина

Правки для mediawiki 13

Поиск

Недавнее

Архив

Разделы