Flash плейер на web-сайт для проигрывания flv и mp3 файлов

Материал из rrv-wiki
Перейти к навигации Перейти к поиску

Появилась задача: проигрывать прямо на сайте mp3 файлы, был найден сайт flv-mp3.com, на котором добрые люди раздают два плейера. Один может проигрывать mp3-файлы, второй flv-файлы. Все описание есть на сайте.

На всякий случай я скопировал плейеры, вдруг сайт загнется :)


MP3

ump3player

Пример html-ки: 

cat mp3.html
<object type="application/x-shockwave-flash" data="http://rrv.nsk.ru/flv-mp3/ump3player_500x70.swf" height="70" width="470">
<param name="wmode" VALUE="transparent" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="http://rrv.nsk.ru/flv-mp3/ump3player_500x70.swf" />
<param name="FlashVars" value="way=http://rrv.nsk.ru/flv-mp3/my.mp3&swf=http://rrv.nsk.ru/flv-mp3/ump3player_500x70.swf&w=470&h=70&time_seconds=0&autoplay=0&q=&skin=sky&volume=70&comment=Тестовая надпись" />
</object>

FAQ

Как формируется HTML-код?

HTML-код, генерируемый нашим сервисом, содержит все параметры плеера, настраиваемые через интерфейс. Параметры можно исправлять вручную прямо в HTML. Также следует разобраться в параметрах при интеграции плеера в CMS. Расшифруем построчно (обратите внимание на дублирование параметров, чтобы плеер корректно работал во всех браузерах): 

   <OBJECT width="400" height="60">
   Размеры плеера. Соотношение сторон должно быть 20 (ширина):3 (высота).

   <PARAM NAME="movie" VALUE=http://yoursite.com/ump3player_500?70.swf />
   Абсолютная или относительная ссылка на файл плеера.

   <param name="wmode" VALUE="transparent" />
   Включается прозрачный фон для флеш-ролика.

   <param name=FlashVars value="way=http://yoursite.com/sample.mp3&swf=http://yoursite.com/ump3player_500x70.swf&w=400&h=60&
   time_seconds=164&autoplay=0&skin=white&volume=70&comment=Название" />
   Настройки плеера (следуют через & в формате параметр=значение):

       * way — путь к файлу flv;
       * swf — путь к файлу плеера;
       * w — ширина плеера (дублируется из тега object);
       * h — высота плеера (дублируется из тега object);
       * time_seconds — время mp3-файла в секундах;
       * autoplay — плеер начинает играть сразу (1) или ждет, пока нажмут на Play (0) — рекомендуется;
       * skin — цветовая схема плеера или скин (адрес скина);
       * volume — стартовый уровень звука (потом пользователь настраивает сам на свое усмотрение) — 0-100;
       * comment - пояснительная надпись (название ролика) во время заставки;
         Обязательные параметры — way и time_seconds.

   <embed src=http://yoursite.com/ump3player_500?70.swf wmode="transparent" type="application/x-shockwave-flash" flashvars="way=http://yoursite.com/sample.mp3&swf=http://yoursite.com/ump3player_500x70.swf&w=400&h=60&
   time_seconds=164&autoplay=0&skin=white&volume=70&comment=Название" width="400" height="60" /></embed>
   Здесь дублируются параметры
   путь к файлу плеера swf — scr
   настройки плеера — flashvars
   ширина плеера — width
   высота плеера — height

   </OBJECT>

Как вставить плеер с помощью JavaScript (swfObject)?

Наиболее правильным способом вставки плеера на страницу сайта является способ интеграции с помощью JavaScript. Этот способ помогает, например, избавиться от необходимости активировать флеш кликом в некоторых бразуерах (IE Eolas Update). Также существует возможность легко создавать альтернативный контент, если у пользователя не установлен Flash.

Наиболее популярное решение для интеграции флеш-роликов на JavaScript — SwfObject (подробнее на русском). Обратите внимание на правильную передачу переменных flashvars, в которых передаются настройки плеера.

Вроде все делаю правильно, но на моем хостинге mp3-файл не хочет проирываться в плеере. Зависает в самом начале.

Возможно, все дело в хостинге. Проверьте файл .htaccess. Может быть, там есть строка со списком разрешенных файлов. Например, такая: 

   AddType application/x-httpd-php .php .htm .html .phtml

В этом случае, нужно разрешить запуск mp3 и swf файлов добавлением новой строки: 

   Addtype application/x-shockwave-flash .mp3 .swf

FLV

uflvplayer

Пример html-ки: 

cat flv.html
<object type="application/x-shockwave-flash" data="http://rrv.nsk.ru/flv-mp3/uflvplayer_500x375.swf" height="300" width="400">
<param name="bgcolor" value="#FFFFFF" />
<param name="allowFullScreen" value="true" />
<param name="movie" value="http://rrv.nsk.ru/flv-mp3/uflvplayer_500x375.swf" />
<param name="FlashVars" value="way=http://rrv.nsk.ru/flv-mp3/my.flv&swf=http://rrv.nsk.ru/flv-mp3/uflvplayer_500x375.swf&w=400&h=300&pic=http://rrv.nsk.ru/flv-mp3/my.flv.gif&autoplay=0&tools=1&skin=white&volume=70&q=&comment=тестовая надпись" />
</object>

FAQ

Как формируется HTML-код?

HTML-код, генерируемый нашим сервисом, содержит все параметры плеера, настраиваемые через интерфейс. Параметры можно исправлять вручную прямо в HTML. Также следует разобраться в параметрах при интеграции плеера в CMS. Расшифруем построчно (обратите внимание на дублирование параметров, чтобы плеер корректно работал во всех браузерах): 

   <OBJECT height="340" width="400">
   Размеры плеера. Соотношение сторон должно быть 4 (ширина):3 (высота). Если используется скин с рамкой — к высоте добавляется значение (height/300)*40 (как в данном частном случае)

   <PARAM NAME="movie" VALUE="http://yoursite.com/uflvplayer_500?375.swf" />
   Абсолютная или относительная ссылка на файл плеера.

   <param name="allowFullScreen" value="true" />
   Разрешение использовать полноэкранный режим просмотра.

   <param name=FlashVars value="way=http://yoursite.com/sample.flv&swf=http://yoursite.com/uflvplayer_500?375.swf&w=400&h=340&
   pic=http://yoursite.com/splash.jpg&autoplay=0&tools=1&skin=whiteblack&volume=70&comment=Название" />
   Настройки плеера (следуют через & в формате параметр=значение):

       * way — путь к файлу flv;
       * swf — путь к файлу плеера;
       * w — ширина плеера (дублируется из тега object);
       * h — высота плеера (дублируется из тега object);
       * skin — цветовая схема плеера или скин (адрес скина);
       * pic — путь к файлу картинки для демонстрации заставки до загрузки видео;
       * autoplay — плеер начинает играть сразу (1) или ждет, пока нажмут на Play (0) — рекомендуется;
       * tools — кнопки управления видны постоянно (1), не видны (0), появляются при наведении курсора (2);
       * volume — стартовый уровень звука (потом пользователь настраивает сам, на свое усмотрение) — 0-100;
       * comment - пояснительная надпись (название ролика) во время заставки;
         Единственный обязательный параметр — way.

   <param name="bgcolor" value="#FFFFFF" />
   Цвет фона вашего сайта в том месте, где публикуется видео
   (по умолчанию белый).

   <embed src=http://yoursite.com/uflvplayer_500?375.swf allowFullScreen="true" type="application/x-shockwave-flash" flashvars="way=http://yoursite.com/sample.flv&swf=http://yoursite.com/uflvplayer_500?375.swf&w=400&h=340&skin=whiteblack&
   pic=http://yoursite.com/splash.jpg&autoplay=0&tools=1&volume=70&comment=Название" bgcolor=" #FFFFFF" width="400" height="340" /></embed>
   Здесь дублируются параметры
   путь к файлу плеера swf — scr
   настройки плеера — flashvars
   цвет фона сайта — bgcolor
   ширина плеера — width
   высота плеера — height

   </OBJECT>

Как вставить плеер с помощью JavaScript (SWFObject)?

Наиболее правильным способом вставки плеера на страницу сайта является способ интеграции с помощью JavaScript. Этот способ помогает, например, избавиться от необходимости активировать флеш кликом в некоторых бразуерах (IE Eolas Update). Также существует возможность легко создавать альтернативный контент, если у пользователя не установлен Flash.

Наиболее популярное решение для интеграции флеш-роликов на JavaScript — SWFObject (подробнее на русском). Обратите внимание на правильную передачу переменных flashvars, в которых передаются настройки плеера.

Вроде все делаю правильно, но на моем хостинге flv-файл не хочет проирываться в плеере. Зависает в самом начале.

Возможно, все дело в хостинге. Проверьте файл .htaccess. Может быть, там есть строка со списком разрешенных файлов. Например, такая: 

   AddType application/x-httpd-php .php .htm .html .phtml

В этом случае, нужно разрешить запуск flv и swf файлов добавлением новой строки: 

   Addtype application/x-shockwave-flash .flv .swf

Изображение есть, но перемотка не работает.

Видимо, в метаданных ролика нет информации о длительности видео. Это возможно, если при конвертации использовалось устаревшее программное обеспечение. Можно переконвертировать видео другой программой, если у вас есть исходник. Но можно сделать проще — в HTML-коде сборки прописать параметр time_seconds, как это показано ниже. Обратите внимание, что параметр прописан дважды (для разных браузеров) и время указано в секундах. 


<OBJECT height=300 width=400><PARAM NAME="movie" VALUE="http://flv-mp3.com/i/pic/uflvplayer_500?375.swf">
<param name="wmode" VALUE="transparent">
<param name=FlashVars value="way=http://flv-mp3.com/i/pic/sample.flv&swf=http://flv-mp3.com/i/pic/uflvplayer_500?375.swf&time_seconds=500&w=400&h=300&pic=http://&autoplay=0&tools=1&skin=white&volume=70&comment=">
<embed src=http://flv-mp3.com/i/pic/uflvplayer_500?375.swf type="application/x-shockwave-flash" wmode="transparent" flashvars="way=http://flv-mp3.com/i/pic/sample.flv&swf=http://flv-mp3.com/i/pic/uflvplayer_500?375.swf&time_seconds=500&w=400&h=300&skin=white&pic=http://&autoplay=0&tools=1&volume=70&comment=" width="400" height="300">
</embed>
</OBJECT>
Источник — https://i-rrv.ru/wiki/index.php?title=Flash_плейер_на_web-сайт_для_проигрывания_flv_и_mp3_файлов&oldid=141