Плеер HTML5
Uppod 0.2.11 βCкачать uppod.js
История обновлений
Демо →
Текущие возможности
- режимы видео и аудио
- плейлисты
- экспериментальная поддержка стилей
- JavaScript API
Особенности
- один файл uppod.js (вся графика рисуется программно с помощью canvas)
- не требует для работы каких-либо фреймоворков (jQuery и т.п.)
- работа во всех браузерах с поддержкой HTML5 (см. таблицы ниже)
- работа в мобильных браузерах, включая iPhone и iPad
- возможность автопереключения на Flash
- полноценный полноэкранный режим
- поддержка CSS
- JavaScript API
- плеер распространяется на тех же условиях, что и Flash-версия, т.е. бесплатно.
Аудио
| MP3 | Vorbis | AAC | |
| Google Chrome | + | + | + |
| Mozilla Firefox | - | + | - |
| Opera | - | + | - |
| Internet Explorer | + | - | + |
| Safari | + | - | + |
Видео
| MPEG-4 (H.264) | VP8 (WebM) | Ogg Theora | |
| Google Chrome | + (будет убрано) | 6.0+ | 3.0+ |
| Mozilla Firefox | - | 4.0+ | 3.5+ |
| Opera | - | 10.6+ | 10.5+ |
| Internet Explorer | 9.0+ | - | - |
| Safari | 3.1+ | - | - |
Подключение
- Включаем в шапку документа uppod.js (в head)
<script src="http://site.ru/uppod.js" type="text/javascript"></script> - Размещаем на странице элемент, в котором будет плеер. В class указываем идентификатор каскадных стилей (в CSS нужно указать размеры элемента), в id указываем уникальный идентификатор плеера.
<div class="player" id="videoplayer"></div> - В конце документа запускаем
<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 - текст название ролика nohtml5 - текст или ссылка если браузер не поддерживает HTML5 —
показываем сообщение (текст),
либо загружаем Flash-версию (ссылка на swf)pl - список в формате JSON или ссылка на файл плейлиста Пример списка: "pl":[{"comment":"Пример","poster":"ссылка_на_постер","file":"ссылка_на_файл"},{"comment":"Пример","poster":"ссылка_на_постер","file":"ссылка_на_файл"}]
В случае использовании ссылки, плейлист должен лежать на том же домене.
Скачать пример подключения (не забудьте обновить плеер до последней версии)
Стили
Для установки стилей нужно скачать в конструкторе версию стилей для HTML5 (подробнее о подключении стилей). Версия HTML5 пока не поддерживает стили Uppod в полной степени, но мы работаем над улучшением совместимости.JavaScript API
Подписка на событияdocument.getElementById(id).addEventListener(команда,функция,false);
Напримерdocument.getElementById("player").addEventListener("play",onPlay,false);
| событие | описание |
| init | инициализация |
| play | пуск |
| pause | пауза |
| stop | стоп |
| fullscreen | полноэкранный режим |
| exitfullscreen | выход из полноэкранного режима |
Команды и запросы работают после инициализации, например, player.Play();
| запрос | возвращает |
| CurrentTime | время в секундах |
| Duration | длительность в секундах |
| Played | сколько проиграно в процентах |
| команда | параметры | описание |
| Play | ссылка (опционально) | пуск |
| Pause | - | пауза |
| Stop | стоп | |
| Toggle | пуск / пауза | |
| Full | полный экран | |
| Alert | текст | вывод сообщения |
| Seek | время в секундах | перемотка |