Плеер HTML5

Uppod 0.12

Cкачать uppod.js

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

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

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

Особенности

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

Аудио

MP3VorbisAAC
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 Explorer9.0+--
Safari+--

Подключение

  1. Включаем в шапку документа uppod.js (в head)
    <script src="http://site.ru/uppod.js" type="text/javascript"></script>

  2. Размещаем на странице элемент, в котором будет плеер. В 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 или ссылка на файл плейлиста

    Пример списка: "pl":{"playlist":[{"comment":"Пример","poster":"ссылка_на_постер","file":"ссылка_на_файл"},{"comment":"Пример","poster":"ссылка_на_постер","file":"ссылка_на_файл"}]}

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


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

Стили

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

Переключение на Flash

Чтобы плеер переключился на Flash в случае необходимости - передайте в параметрах ссылку на swf-файл параметром swf. Ссылку на стили для Flash можно передать параметром stflash. Ссылки на контент (видео, аудио, постер, плейлист и так далее) должны быть не зашифрованы (работает с версии 0.5.41)

HLS

Для воспроизведения m3u8 на десктопах требуется CORS. На мобильных платформах плеер воспроизводит HLS в нативном режиме (через браузер). Параметры

JavaScript API

Подписка на события
document.getElementById(id).addEventListener(команда,функция,false);
Например
document.getElementById("player").addEventListener("play",onPlay,false);

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

Команды и запросы работают после инициализации
new Uppod({
   m: "video",
   uid: "uppod",
   onReady: function(uppod){
      uppod.Play("/test/support/video.webm|/test/support/video.mp4");
   }
});


запросвозвращает
CurrentTimeвремя в секундах
Durationдлительность в секундах
Playedсколько проиграно в процентах
Loadedсколько загружено в процентах
PlNumberпорядковый номер запущенного
файла в плейлисте
getStatusстатус
0 - не запущен
1 - воспроизводит
2 - на паузе
3 - буферизация
командапараметрыописание
Playссылка (опционально)пуск
Pause-пауза
Stopстоп
Toggleпуск / пауза
Fullscreenполный экран
Normalscreenнормальный экран
Alertтекствывод сообщения
Seekвремя в секундахперемотка
Volumeдробное от 0 до 1громкость
PlayPlNumberпорядковый номерзапуск файла в плейлисте
Downloadскачать файл
Volumeуровень громкости (0-1)громкость
Changeпараметр,значниеизменение параметра плеера
Сообщить об ошибке на сайте
 Uppod © 2008–2017       Контактная информация   /  Соглашение  /  Twitter  /  Facebook
Сообщить об ошибке на сайте
Если ошибка относится к плееру, а не сайту, либо Вы хотите получить ответ на вопрос —
лучше написать на форуме