admin / 27.09.2018

Конструктор плеера для сайта

.

Лучшие плееры для сайта (mp3, flv, flash players)

  1. SEO Блог
  2. Создание сайта

2012-03-05

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

Какой флеш плеер лучше ставить на сайт

Универсальные видео и аудио плееры

Uppod Player — Универсальный плеер Uppod проигрывает практически любые аудио и видео файлы (FLV, MP3, MP4, F4V, MOV, M4A, 3GP, AAC).

HTML5-видеоплееры, о которых вы должны знать

Имеет очень малый вес и легко устанавливается на любой сайт. На сайте разработчика есть удобный конструктор для создания одного из двух вариантов плеера (в зависимости от ваших потребностей и доктайпа сайта), это может быть Flash Player 10 или HTML5 плеер на javascript для сайтов сверстанных на HTML5, который поддерживает воспроизведение только MP4, AAC, OGV, Vorbis, WebM, MP3 и WAV файлов. Правда создать бесплатный плеер для сайта можно только после регистрации на сайте.

JW Player. Еще один универсальный проигрыватель для сайта. Поддерживает еще большое количество форматов файлов чем предыдущий, в том числе видео с You Tube и даже изображения JPEG (.jpg), PNG (.png), GIF (.gif). Универсален он так-же потому что совмещает в себе и флеш и html5 варианты и может быть настроен как вам будет угодно. Вы можете совершенно бесплатно скачать JW Player (его бесплатную версию) и установить себе на сайт.

Flowplayer — Мощный бесплатный плеер для сайта. Имеет целую кучу различных настроек, все его и так практически безграничные возможности по воспроизведению медиа файлов расширяются при помощи плагинов (на Flash, JavaScript или Streaming plugins). Поддерживает создание плейлистов, в него может быть встроена даже Google аналитика.

MC Media Player — не сказать, что лучший но зато бесплатный флеш плеер для медиа файлов. К сожалению его разработка и усовершенствование прекратилась. Но вы пока еще можете встроить его в свой сайт скачав старую версию этого флеш плеера.

Видео плееры для установки на сайт

Video LightBox — не совсем плеер, это компьютерная программа которая в три клика позволит вам встроить в сайт или блог любое видео в попап окне, которое по клику будет увеличиваться до нужных размеров, в нее можно добавлять как Youtube, Facebook, Google Video так и файлы других видео-форматов. Полезна будет для сайтов где видео публикуется редко и для установки постоянного плеера нет смысла. Скачать Video Lightbox

Video Player Pro — бесплатный проигрыватель видео-клипов с поддержкой плей листов и разных скинов. Правда бесплатен он только для не коммерческого использования. Вы можете скачать видео плеер на сайте разработчика.

FLV Video Player — Видео плеер FLV проигрывает лишь файлы в формате flv, поэтому размещая на своем сайте различные видео файлы вам придется при помощи специальных программ или онлайн сервисов конвертировать видео-ролики в поддерживаемый им формат. При установке этого плеера вы можете скачать flv плеер бесплатно себе на сервер или загружать его с сайта разработчика. Так-же вы можете создать свой плеер при помощи специального конструктора.

Аудио или mp3 плееры для установки на сайт

FLV Audio Player — Аудио плеер FLV простой проигрыватель mp3 треков без особых наворотов, по следующим ссылкам вы можете
скачать бесплатный mp3 плеер или создать свой вариант mp3 плеера для установки на сайт.

Mju плеер подкастов проигрыватель музыки или подкаста который легко встроить в любой сайт, даже в ЖЖ (Livejournal). Списки треков хранятся в отдельном текстовом файле, поддержка русских названий песен, повтор, случайный порядок песен и другие полезные настройки этого простого плеера делают его одним из лучших аудио плееров для сайта. Можете скачать mju плеер и убедиться в этом сами.

jQuery jplayer — плагин jQuery для создания собственного аудио плеера. Подробное описание подключения этого плагина к сайту вы найдете тут.

Плееры для вордпресс (wordpress players pligins)

WordPress Audio Player — плагин вордпресс с флеш плеером для проигрывания на на вашем блоге mp3 музыкальных треков или подкастов. Вот ссылка на плагин этого флеш плеера для установки на ваш блог.

Другой плагин для вордпресс Flash Video Player более крут и служит уже для воспроизведения на сайте как видео так и аудио файлов. Скачать плагин флеш плеер для вордпресс можно с официального репозитория плагинов.

Думаю этот список должен помочь вам выбрать самый лучший плеер, который лучше всего подойдет вашему сайту или блогу

Читайте также: сайтостроениеflashmediaплееры

Комментарии к статье

← Предыдущая статьяСледующая статья →

с 10 версией Adobe Flash Player.

  • Приготовьте flv-файл с нужным качеством изображения.

    Get Player Code

  • Запишите его и файл плеера на свой сервер или подгружайте плеер с нашего сайта.
  • Соберите плеер на нашем сайте.
  • Вставьте полученный html-код на страницу.
  • По номеру настроек можно вернуться к редактированию в любое время.
  • Более подробная инструкция.

3.2

2.1

  • Публикуем модули.
  • 10 сентября сервис собрал
    1000-ый плеер.
  • FAQ для решения проблем при работе с flv-плеером.
  • Сервис оказал техническую поддержку презентации клипа группы .
  • Улучшилось качество — при масштабировании включается сглаживание изображения.
  • Теперь при сборке не нужно указывать время, значение берется из метаданных самого видеоролика.
  • Теперь собранный flv-плеер показывает свой html-код.
  • Приготовьте mp3-файл с нужным качеством звучания и приемлемый по весу.
  • Запишите его и файл плеера на свой сервер или подгружайте плеер с нашего сайта.
  • Соберите плеер на нашем сайте.
  • Вставьте полученный html-код на страницу.
  • По номеру настроек можно вернуться к редактированию в любое время.
  • Более подробная инструкция.

2.4

2.0

  • Исправлен баг с автозапуском.
  • Добавлена опция embed HTML — плеер показывает свой html-код.

Как встроить видео и аудио на сайт? Как вставить видео проигрыватель? FLV и MP3 плееры для сайта скачать бесплатно!

Бесплатный сервис Студии U

Возможности

· online-генератор настроек
· работа во всех популярных браузерах
· возможность использовать заставку
· все файлы на вашем сервере
· малый вес — около 20Кб

· темы оформления (скины)
· приятный дизайн
· выбор цвета
· бесплатный сервис
· развитие проекта

Владельцам сайтов

Хотите заказать плеер
со своим логотипом?

Форум

— — — — —

Прочитайте, пожалуйста,
правила пользования

Флешь плеер для воспроизведения mp3 файлов.

Дата публикации: 09.12.2012

При разработке интернет сайтов иногда перед веб мастером становится задача воспроизведение mp3 файлов на страницах сайта. Сегодня я на примере покажу для начинающих веб мастеров как проигрывать mp3 треки на странице сайта, для данной задачи мы будем использовать флешь плеер для mp3 файлов.

Все нужные нам файлы mp3 плеера мы будем брать на сайте uppod.ru , перед тем как начнем хотелбы сказать пару слов о сервисе Uppod, данный сервис предоставляет плеера для воспроизведения mp3 файлов, видео файлы и создание слайд презентаций.

Но сегодня как я и говорил мы остановимся только на флешь плеере для mp3.

Лучшие плееры для сайта (mp3, flv, flash players)

Для начала регистрируемся на Uppod, далее переходим в вкладку собрать плеер -> скачать и скачиваем основной файл uppod.swf который используется как для mp3 так и для видео, создаем на рабочем столе папку с произвольным названием и ложим туда наш скачанный файл uppod.swf, также в туже папку для примера положите любой mp3 файл.

Теперь нам нужно выбрать и скачать стиль для нашего сайта для этого переходим во вкладку приложения -> скины и в меню которое расположено с лева выбираем пункт меню аудио, теперь перед вами открывается множества флешь плееров, выбираете любой нажав кнопку сохранить.

После того как нужный нам стиль флешь плеера сохранен переходим во вкладку собрать плеер -> конструктор и кликаем аудио -> стили и скачиваем сохранный ранее стиль.

Скачанный стиль выступает в роли текстового документа который мы также ложим в нашу папку на рабочем столе. Теперь когда все файлы готовы можно собирать плеер. Создаем в нашей папке html файл и прописываем туда следующий код:

в строке №1 мы указали путь к uppod.swf а также задали ширину (width) и высоту (height) плеера, в строке №6 еще раз указываем путь к uppod.swf далее в строке №7 мы указываем путь к mp3 файлу и к стилю нашего плеера, при создании плееров в Uppod используются переменные о которых вы можите почитать на сайте, мы же с вами используем только две переменные:
file=путь к файлу
st=путь к файлу стилей
&— используется как разделитель между переменными.
На выходе мы получаем вот такой mp3 флешь плеер:

вот тот же mp3 плеер но с другим стилем mp3 флешь плеер как в контакте.

Демо пример видео плеера, так для примера

На по следок скажу что в сервисе Uppod можно создавать свои стили в специальном редакторе а также шифровать пути к файлам, налаживать водяной знак на видео и тд.. На этом все и до новых встреч.

Обсуждение →

Плеер HTML5

Uppod 0.13

Cкачать uppod.js
Cкачать в кодировке Win-1251

История обновлений

0.13

  • 0.13.05 добавлена поддержка postmessage
  • Скролл в полноэкранном режиме меняет громкость
  • Исправление неполадок

0.12

  • Добавлена поддержка Google Analytics
  • Исправление неполадок

0.10.1

0.9.5 — 0.9.7

0.9.2-0.9.4

  • Добавлена поддержка опции ограничения файлов в плейлисте на одной странице, если включена перемотка стрелками
  • Улучшена работа VAST
  • Исправление неполадок

0.8.6-0.9.1

  • Отключен фулскрин двойным кликом для режима аудио
  • Исправлена проблема картинкой фона
  • Улучшена работа VAST
  • Исправление неполадок

0.8.5

  • Поддержка Surface и всех устройств с тачскрином автоматически
  • Исправлена проблема с HLS в Safari на Mac OS

0.8.0-0.8.4

  • Исправлена проблема с HLS на Windows
  • Работает опция «Автоматически получать варианты из манифеста» для переключателя качества
  • Опция реферер больше не требуется
  • Исправление неполадок

0.7.1 — 0.7.2

  • Поддержка HLS для десктопов

0.6.5-0.6.6

  • Поддержка HTTPS для видеорекламы
  • Исправление багов

0.6.4

  • Видеореклама
  • Расширенные настройки в редакторе стилей (Модули > HTML5): автоматическое увеличение кнопок на мобильных платформах, скролл стрелками в плейлисте
  • Высота плеера адаптивно меняется при изменении размеров контейнера

0.5.42-0.5.45

  • Добавлена загрузка плейлистов Youtube
  • Исправление багов

0.5.41

  • Добавлен запрос Volumed для получения значения громкости
  • Улучшено переключение качества Youtube

0.5.28-0.5.40

  • Исправлен баг со кнопкой Скачать
  • Постер отображается после окончания воспроизведения
  • Исправлена проблема с кнопкой полноэкранного режима в нативном интерфейсе (на мобильных платформах)
  • Улучшена поддержка стилей
  • Исправление багов
  • Опция Referer

0.5.26-0.5.27

  • Включена работа модулей Переадресация и Защита на домен. Исправлены недочеты.

0.5.24

  • Добавлено событие loaded и команды Loaded и Normalscreen в JS API
  • Исправлены ошибки

0.5.21-0.5.23

  • Можно обновлять плейлист командой Change
  • Включен нативный плеер для iOS и Android по умолчанию
  • Исправлены ошибки

0.5.19-0.5.20

0.5.15-0.5.18

  • Добавлено масштабирование видео на всю ширину экрана и растягивание
  • Исправлены ошибки

0.5.12-0.5.14

  • Полноэкранный режим в IE11
  • События quality и mybut
  • Исправлены ошибки

0.5.10-0.5.11

  • Снижен вес плеера
  • Исправлены ошибки

0.5.8 — 0.5.9

  • Добавлена опция исчезания панели в полноэкранном режиме ( Кнопки > Полный экран > + > Прятать панель)
  • Исправление ошибок

0.5.7

  • Поддержка VAST для владельцев лицензий
  • Исправление ошибок

0.5.1 — 0.5.6

0.4.7-0.4.18

  • Поддержка субтиров vtt на всех платформах
  • Исправление ошибок

0.4.5-0.4.6

  • Поддержка ретины
  • Исправление ошибок

0.4.1-0.4.4

  • Полноценная интеграция с Youtube
  • Поддержка субтитров
  • Улучшена работа перемотки
  • Плеер не требует обязательного указания размеров контейнера в CSS
  • Исправлены баги

0.3.20-0.3.30

  • Улучшено отображаение стилей

0.3.15-0.3.19

  • Проверка на шифрование плейлиста
  • Исправлен баг с отображением цветов в сокращенном формате
  • Добавлены события seeking, seeked
  • Исправлен баг с JS API (Seek)
  • Улучшена работа интерфейса

0.3.10-0.3.14

  • Apple в последнем обновлении IOS ограничило возможности элементов, которые находятся над видео, поэтому внутренние плейлисты на IOS-устройствах теперь показываются под плеером. Так же Apple убрали возможность автозапуска, которую включили незадолго до этого (экономия мобильного трафика).
  • добавлено событие error в js api
  • улучшена работа с iframe

0.3.9

  • поддержка or
  • на IOS и Android автоматически включается нативный плеер при запуске (отключается iosplayer=0 и androidplayer=0 соответственно)

0.3.8

  • поддержка кастомных иконок
  • добавлено обытие end
  • исправление багов

0.3.6-0.3.7

  • полноценный полноэкранный режим в браузере Opera
  • Пример переключения плееров на одной странице
  • исправление багов

0.3.5

  • расширен JS API (Volume)
  • можно указать длительность файла параметром time (в секундах)
  • исправлены баги

0.3.3-0.3.4

  • можно указать длительность файла параметром time (в секундах)
  • добавлены разделители
  • исправлены баги

0.3.2

0.2.21

  • расширен JS API (PlNumber, PlayPlNumber)

0.2.15-0.2.20

0.2.14

  • добавлено расположение горизонтального плейлиста под плеером
  • исправлен баг с прокруткой плейлиста в IE
  • исправлен баг с прокруткой плейлиста на тачскрине IOS (Safari)
  • исправлены мелкие недочеты

0.2.12-0.2.13

0.2.11

  • улучшена поддержка стилей (добавлены бегунки и отступы в тюнинге кнопок)

0.2.10

  • исправлен баг с перемоткой при автостарте
  • исправлен баг с запуском следующего файла в плейлисте на IOS
  • в JS API добавлена команда Seek

0.2.9

  • улучшен полноэкранный режим
  • улучшена поддержка стилей (добавлены кнопки Назад, Вперед и Скачать)
  • исправлены баги

0.2.8

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

0.2.7

  • включен полноценный полноэкранный режим для поддерживающих браузеров (Хром, Фаерфокс, Сафари)
  • исправлены баги с плейлистом
  • при указании ссылки на youtube плеер переключается на YouTube API

0.2.6

  • улучшена поддержка скинов
  • реализованы все варианты регуляторов громкости и иконки плейлиста
  • включено запоминание громкости звука
  • улучшено взаимодействие с плейлистами (переключать дальше, случайное воспроизведение)
  • исправлены недочеты

Демо →

Текущие возможности

  • режимы видео и аудио
  • плейлисты, переключение качества, субтитры
  • экспериментальная поддержка стилей
  • поддержка HLS
  • JavaScript API
  • интеграция с Youtube
  • полноценный полноэкранный режим

Особенности

  • все в одном js файле
  • не требует каких-либо фреймоворков (jQuery и т.п.)
  • работа во всех браузерах с поддержкой HTML5 (см. таблицы ниже)
  • работа в браузерах мобильных устройств (ios, android)
  • плеер распространяется на тех же условиях, что и Flash-версия, т.е. бесплатно.

Аудио

MP3 Vorbis AAC
Google Chrome + + +
Mozilla Firefox + +
Opera + +
Internet Explorer + +
Safari + +

Видео

MPEG-4 (H.264) VP8 (WebM) Ogg Theora
Google Chrome + + +
Mozilla Firefox — (+ FF21 Win, Android) + +
Opera + (с версии 25) + +
Internet Explorer 9.0+
Safari +

Подключение

  1. Включаем в шапку документа uppod.js (в head)

    <script src="https://redirme.to/http://site.ru/uppod.js" type="text/javascript"></script>

  2. Размещаем на странице элемент, в котором будет плеер.

    Get Player Code

    В class указываем идентификатор каскадных стилей (в CSS нужно указать размеры элемента), в id указываем уникальный идентификатор плеера.

    <div class="player" id="videoplayer"></div>

  3. В конце документа запускаем

    <script type="text/javascript">this.player = new Uppod({m:"video",uid:"videoplayer",file:"ссылка",poster:"ссылка"});</script>

    Рецепт проверки на мобильные браузеры (IOS, Android).

    Параметры подключения

    параметр обязательный значения описание
    m + video или audio режим плеера
    uid + текст идентификатор плеера (id)
    file если нет pl ссылка ссылка на файл видео или аудио (если используется несколько форматов, то можно указать ссылки через знак | в порядке приоритета, плеер сам выберет файл, который поддерживает браузер)
    poster ссылка ссылка на заставку
    comment текст название ролика
    pl список в формате JSON или ссылка на файл плейлиста

    В случае использовании ссылки, плейлист должен лежать на том же домене.

    Скачать пример подключения (не забудьте обновить плеер до последней версии)

Стили

Для установки стилей нужно скачать в конструкторе версию стилей для HTML5 (подробнее о подключении стилей). Версия HTML5 пока не поддерживает стили Uppod в полной степени, но мы работаем над улучшением совместимости.

Пример API →

JavaScript API

Подписка на события

document.getElementById(id).addEventListener(команда,функция,false);

Например

document.getElementById(«player»).addEventListener(«play»,onPlay,false);

событие описание
init инициализация
start старт
play пуск
pause пауза
stop стоп
fullscreen полноэкранный режим
exitfullscreen выход из полноэкранного режима
seeking начало перемотки
seeked конец перемотки
player_error ошибка воспроизведения
end конец воспроизведения
quality переключение качества
(запрос выбранного качества — uppod.Get[«quality»])
mybut нажатие на свою кнопку
(запрос команды кнопки — uppod.Get[«mybut»])

Команды и запросы работают после инициализации

new Uppod({
   m: «video»,
   uid: «uppod»,
   onReady: function(uppod){
      uppod.Play(«/test/support/video.webm|/test/support/video.mp4»);
   }
});

запрос возвращает
CurrentTime время в секундах
Duration длительность в секундах
Played сколько проиграно в процентах
PlNumber порядковый номер запущенного
файла в плейлисте
getStatus статус
0 — не запущен
1 — воспроизводит
2 — на паузе
3 — буферизация
команда параметры описание
Play ссылка (опционально) пуск
Pause пауза
Stop стоп
Toggle пуск / пауза
Full полный экран
Alert текст вывод сообщения
Seek время в секундах перемотка
Volume дробное от 0 до 1 громкость
PlayPlNumber порядковый номер запуск файла в плейлисте
Download скачать файл
Volume уровень громкости (0-1) громкость
Change параметр,значние изменение параметра плеера

FILED UNDER : IT

Submit a Comment

Must be required * marked fields.

:*
:*