Верх страницы
Обложка к записи Аудио-видео проигрыватель для вашего сайта
Время для прочтения: 0 мин. 21 сек.

Аудио-видео проигрыватель для вашего сайта

Меня очень часто спрашивают, какой плеер можно использовать на сайте для проигрывания MP3, просмотра FLV, листания JPEG. Свое предпочтение я отдаю JWPlayer.

Чтобы воспользоваться всеми возможностями данного проигрывателя, нам понадобится SWObject для внедрения плеера на страницу

  1. Распаковываем архив в папку /player/ на сервере
  2. Создаем директорию /media/ для наших аудио-видео данных
  3. Копируем в нее наш файл video.flv
  4. Распаковываем SWObject в папку /js/
  5. Внедряем SWObject в код вашей страницы в секции
 
<script src="swfobject.js" type="text/javascript"></script>
 

В том месте разметки, где вы хотите видеть плеер пишем

 
<p id="preview">Плеер будет отображен внутри этого параграфа</p>
<script type="'text/javascript'">
var s1 = new SWFObject('player/player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=media/video.flv');
s1.write('preview');
</script>
 

Открываем страницу и наслаждаемся просмотром нашего ролика

Конфигурация

При передаче переменных в плеер необходимой их url-кодировать (в РНР urlencode(), например):

  • ? → %3F
  • = → %3D
  • & → %26

Пример:

если ваш файл расположен по адресу

getplaylist.php?id=123&type=flv

вы должны на выходе получить

getplaylist.php%3Fid%3D123%26type%3Dflv

Плей-лист

  • playlistfile (undefined): ссылка на XML playlist
  • author (undefined): автор видеофайла, отображаемый на экране или в плей-листе
  • date (undefined): дата публикации
  • description (undefined): описание файла
  • duration (0): продолжительность ролика в секундах.
  • file (undefined): ссылка на ролик или плейлист
  • image (undefined): ссылка на картинку-заглушку
  • start (0): позиция в секундах, с которой начнётся воспроизведение. Работает только в потоковом режиме (HTTP / RTMP)
  • streamer (undefined): ссылка на rtmp/http сервер
  • tags (undefined): ключевые слова (теги), ассоциированные с роликом
  • title (undefined): заголовок видео, отображаемый на экране или в плей-листе
  • provider (undefined): ключ позволяющий переключать режимы воспроизведения. По умолчанию, режим определяется автоматически в зависимости от расширения файла. Если по каким-либо причинам определение этого режима происходит неверно, то его можно задать принудительно

    Поддерживаемые типы:
    • video: FLV / MP4 видео и AAC аудио
    • sound: MP3 файлы
    • image: JPG/GIF/PNG
    • youtube: видео с Youtube
    • http: FLV/MP4 видеопоток.
    • rtmp: FLV/MP4/MP3 файлы с RTMP сервера.

Внимание! Статья не завершена.

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

4 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
кирилл
13 лет назад

я использую этот плеер последнюю версию, вполне доволен.
подскажите если можно:
мне необходимо запускать его на странице в подгруженом аяксом диве при нажатии на превью — не работает

подключаю на основной и подгружаемой страницах
если открыть отдельно подгружаемую страницу то объект создаётся и все работает. а в самом подгруженном диве на основной странице — нет

как исправить или что делать ? куда копать ?
(уведомите на мыло о ответе)

спасибо

Artem
12 лет назад

Классный плеер,собираюсь использовать его для онлайн TV у себя на сайте.

Dee Zaster
Dee Zaster
10 лет назад

Да, тут что-то сложновато, это тебе не плеер spruto использовать

mihdan
10 лет назад
Ответить на  Dee Zaster

Реклама не приветствуется (

Предыдущая запись
Следующая запись

Давайте дружить
в Telegram

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы