Uppod.HTML5  0.2.3 β

Полигон · Скачать плеер · Обсуждение

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

• режимы видео и аудио
• стандартный дизайн Uppod
• плейлисты
• JS API

Особенности

• один файл uppod.js (вся графика нарисована программно с помощью canvas)
• не требует для работы каких-либо фреймоворков (jQuery и т.п.)
• работа во всех браузерах с поддержкой HTML5 (см. таблицы ниже)
• работа в мобильных браузерах, включая iPhone и iPad
• возможность автопереключения на Flash
• поддержка CSS
• JS API
• плеер распространяется на тех же условиях, что и Flash-версия, т.е. бесплатно.

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

Инструкция

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), то можно сделать проверку браузера (с переключением на Flash-версию (swfobject).

   if(navigator.userAgent.indexOf("iPhone") != -1 || navigator.userAgent.indexOf("iPad") != -1){
   this.player = new Uppod…
   }else{
   swfobject.embedSWF…
   }

   ключи аналогичны Flash-версии

   ключ	обязательный	значения	описание
   m	+	video или audio	режим плеера
   uid	+	текст	идентификатор плеера (id)
   file	+, если нет pl	ссылка	ссылка на файл видео или аудио (если используется несколько форматов, то можно указать ссылки через знак | в порядке приоритета, плеер сам выберет файл, который поддерживает браузер)
   poster	-	ссылка	ссылка на заставку
   comment	-	текст	название ролика
   nohtml5	-	текст или ссылка	если браузер не поддерживает HTML5 — показываем сообщение (текст), либо загружаем Flash-версию (ссылка на swf)
   pl	-	список в формате JSON или ссылка на файл плейлиста	Пример списка: "pl":[{"comment":"Пример","poster":"ссылка_на_постер","file":"ссылка_на_файл"},{"comment":"Пример","poster":"ссылка_на_постер","file":"ссылка_на_файл"}] В случае использовании ссылки, плейлист должен лежать на том же домене.

   
   Скачать пример подключения

JS API (пример)

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

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

Например:

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

событие	описание
init	инициализация
play	пуск
pause	пауза
stop	стоп
fullscreen	полноэкранный режим
exitfullscreen	выход из полноэкранного режима

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

player.Play();

команда	параметры	описание
Play	ссылка (опционально)	пуск
Pause	-	пауза
Stop		стоп
Toggle		пуск / пауза
Full		полный экран
Alert	текст	вывод сообщения

запрос	возвращает
CurrentTime	время в секундах
Duration	длительность в секундах
Played	сколько проиграно в процентах