Плеер HTML5 Uppod

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

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

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

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

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

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

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

HTML5 видео-проигрыватели

Одно из самых интересных нововведений в HTML5 — возможность обрабатывать и воспроизводить аудио и видео-записи. Достигается это за счет новых тегов <audio> и <video>. которые позволяют реализовать вставку медиа-контента с минимальным количеством кода. До этого основным инструментом для воспроизведения был Flash, который, скажем прямо, никогда не был идеальным, особенно на устройствах фирмы Apple. Введение новых тегов явно нацелено на устранение огрехов флеша.

Многие разработчики уже во всю используют возможности HTML5. Что касается видео и аудио проигрывателей, то их только начинают активно применять, в связи с чем появляется все больше библиотек и различных модулей для их корректной работы во всех браузерах и на всех устройствах. Чтобы упростить поиск и выбор нужного проигрывателя мы собрали 5 наиболее интересных и функциональных плееров в этой статье.

LeanBack — использует javascript и HTML5, чтобы сделать интерфейс видео-плеера удобным для пользователя и добавить возможность управления через сочетания клавиш. Совместим со всеми современными браузерами, а именно Chrome 7+, Firefox 3.6+, Opera 10.6+, Safari 5.0.2+ и Explorer 9. Работает на большинстве мобильных платформ: Android, iOS, BlackBerry, HP webOS, Mozilla Mobile и Windows Phones. Поддерживает следующие аудио и видео кодеки: H.264, Ogg, WebM и Mp3. За счет возможности редактирования стилей плеер легок в настройке и интеграции в дизайн.

MediaElement — это аудио и видео проигрыватель, построенный на чистом HTML и CSS. Для старых версий браузеров, не поддерживающих HTML5, проигрыватель будет работать на Flash или, при необходимости, на Java Silverlight. В комплекте идут плагины для популярных движков: Wordpress, Drupal, Joomla и другие. Поддерживает все современные браузеры и кодеки. Мануалы по настройке внешнего вида, перечень опций и другие функции плеера можно найти на официальной странице.

VideoJS — видео проигрыватель на HTML5 со встроенным javascript для добавления дополнительных функций. Среди этих функций особенно интересные, на наш взгляд, это полноэкранный режим и возможность включить субтитры при проигрывании ролика. Как и у MediaElement, если поддержки HTML5 нет, проигрыватель будет работать на Flash. Корректно отображается во всех браузерах и мобильных устройствах (iOS, Android, Windows Phone, Blackberry и другие).

SublimeVideo — самый функциональный проигрыватель из представленных в обзоре. Поддержка всех видов браузеров и устройств. Единый интерфейс плеера как и для HTML5, так и для Flash. Полноэкранный режим, возможность переключения между SD и HD качеством, поддержка списков воспроизведения, расширенная статистика и режим просмотра в реальном времени. Интеграция с популярными движками, собственный API и еще множество других полезных и важных функции, полный список которых вы найдете на официальном сайте.

Dark Onyx — полноценная платформа для работы с видео-роликами. По функционалу близка, а в некоторых моментах даже обгоняет, SublimeVideo. Из функционала выделим возможности переключения качества ролика (как это сделано у YouTube), интеграциию с движками и социальными сетями, поддержку плейлистов, гибкую настройку внешнего вида, добавление водяного знака, показ рекламы (pre-roll, post-roll или pop-up) при просмотре ролика и удобную панель управления. Полный список функций расположен на официальном сайте

Аудио, видео плеер для сайта

До появления Windows-XP и WindowsServer2004, можно было воспроизвести на сайтах только музыку, это происходило примерно так, браузер подавал команду при помощи ActiveX в "командную строку", которая передавала в WindowsMediaPleyr ссылку на муз.файл и после чего данный плеер воспроизводил эту музыку, и то только в тех случаях если поддерживал этот формат. Так-же оказалось что ActiveX это просто дыра для хакера, ведь можно в место музыки командной строкой как минимум отформатировать диск(уничтожить все данные на компьютере пользователя). На такой технологии до сих пор работает InternetExplorer-6.

Альтернативой ActiveX для мультимедийных приложений на данный момент выступил флеш-плеер. Для простых флеш-объектов(баннеров, браузерных игр) этого плеера вполне достаточно, но для аудио и видео файлов нужно само приложение, которое будет управлять управлять флеш-плеером, потому что последний не имеет интерфейса и соответственно кнопок для управления. Так-же компьютер может не поддерживать некоторые форматы аудио/видео файлов, в этом случае это приложение будет подгружать кодеки(пакеты расширения).

Создавать такие приложения проблема не специалиста по HTML, а программиста на флеш, потому мы воспользуемся готовыми приложениями(аудио/видео плеерами).

Плееров для сайта существуют сотни, а то тысячи видов, есть плееры только под музыку или только под видео, но есть и универсальные. Хотя последние имеют большой объем, и думаю будет большой глупостью их использовать, например у вас сайт рингтонов для мобильных телефонов, представте что сам рингтон имеет вес 0.5мБ а плеер для его воспроизведения 2.5мБ. Так-же почти все плееры имеют лицензию, некоторые лицензии платные. Но я подобрал для вас два плеера с бесплатной лицензией.

Аудио плеер для сайта "webminster-2.0.1".

Данный плеер имеет компактный вид, и не смотря на это в нем есть все необходимые функции для воспроизведения адудио файлов, такие как: регулятор громкости, шкала прогресса, воспроизведение/пауза.

Для того чтобы данный плеер функционировал у вас на сайте достаточно разместить этот код:

<object data="webplayer.swf "

</object>

1)В теге object атрибутом data мы задаем путь к плееру, указываем атрибутом type что это приложение для флеш-плеера, а так-же задаем высоту и ширину.

2)Первым параметром(тегом param ), мы указываем чтобы браузер вывел на монитор наш плеер.

3)Параметр-2 menu служит для подключения плей-листов, в моем примере имеет значение false. что говорит об отсутствии плей листа.

4)Третий параметр, scale/noscale разрешает или запрещает растягивать плеер посетителю.

5)Четвертым параметром мы указываем путь к аудиофайлу и устанавливаем автовоспроизведение, yes(да) или no(нет).

Места в коде которые вы должны отредактировать я пометил черным, пути могут быть как абсолютными так и относительными.

Видео плеер для сайта "flowplayer-3.2.7".

Этот видео плеер имеет так -же компактный вид и множество настроек. Работает с FLV(флеш видео файл), MP4 и многими другими типами видео файлов.

Мы не рассматривали варианты вставки JavaScript и CSS, но тот вариант который предоставлен разработчиком использует эти языки программирования.

1)В тег head нужно указать путь к файлу flowplayer-3.2.6.min.js

2)Атрибутом href тега a мы указываем путь к нашему видео файлу, потом атрибутом style(встроенные стили(css)) мы указываем высоту и ширину нашего плеера и ставим идентификатор id.

3) Далее при помощи функции flowplayer мы обрабатываем данные из ссылки с идентификатором(id)player, перехватываем параметры(адрес видео файла, ширину и высоту плеера), а так-же передаем параметры >. autoPlay -это автовосприизведение, true это да, а false без автовосприизведения. Это далеко не все параметры которые можно передать плееру, но о них можно узнать на сайте разработчика, ссылка на сайт есть в архиве.

Еще огромным достоинством этих плееров есть то что файлы для воспроизведения не обязательно должны лежать на вашем сайте, они могут быть на других, например на Ю-тубе и социальной сети ВКонтакте.

скачать аудио(видео) плеер для сайта. В этом архиве 2 папки, первая audio. в которой расположен аудиоплеер, код для него вы можете скопировать выше. В второй папке flowplayer лежит видеоплеер для сайта(flowplayer-3.2.7.swf), а так-же папка example в которой лежит скрипт flowplayer-3.2.6.min.js написанный на javascript. Так-же есть файл index.html, в котором есть код как вставить плеер, а также ссылки на документацию.

Html player

Видео плеер Kernel Team разработан с учетом основных требований монетизации ресурса. Плеер поддерживает возможность использования огромного количества рекламы в различных местах и при различных событиях, например: pre-roll, post-roll реклама, реклама на паузе или остановке видео, рекламная ссылка в контролбаре плеера, логотип со ссылкой и т.д.

Плеер работает в двух режимах: обычный режим и "embed" режим. Обычный режим предназначен для использования плеера на "родном" сайте. Режим "embed" включается в том случае, если ваш плеер загружается c другого ресурса. В этом режиме конфигурация рекламы плеера не может быть перекрыта извне, таким образом, если кто-то показывает embed код с вашим видео на другом сайте, ваша реклама не может быть перекрыта или удалена. Более того, настройка плеера в "embed" режиме осуществляется вами в одном месте, таким образом, если вы захотите изменить настройки рекламы - эти настройки мгновенно отразятся на всех сайтах, которые используют ваш embed код.

Видео плеер Kernel Team может использоваться бесплатно без каких-либо ограничений.

Для установки плеера вам необходимо выполнить следующие шаги:

• Распакуйте архив с файлами плеера в директорию /%DOMAIN_ROOT%/kt_player. Если вы хотите установить плеер в другую директорию, убедитесь, что вы заменили директорию в .htaccess файле плеера.
• В файле /%DOMAIN_ROOT%/kt_player/.htaccess замените токен %DOMAIN% на название вашего домена.
• Скопируйте файл demo/crossdomain.xml в корень вашего домена. Если вы планируете использовать видео или изображения, которые хостятся на других доменах (и сабдоменах), вам необходимо скопировать этот файл на все другие домены (сабдомены), с которых плеер будет что-то использовать.

Важно! Любые SWF файлы, которые используются в плеере через API должны быть реализованы на ActionScript3.

Для включения плеера у вас на сайте воспользуйтесь конфигуратором. который позволит легко и быстро задать все необходимые настройки плеера.

Видео плеер Kernel Team поддерживает базовый HTML5 режим для проигрывания ваших видео на мобильных устройствах. Плеер использует следующий алгоритм для определения, в каком режиме показывать видео:

Радио-плеер с помощью HTML5 - audio

До появления HTML5 было крайне неудобно добавлять аудио на веб-страницы. Многие годы Flash был единственным способом вставки аудио-контента — но с внедрением тега <audio> в HTML5, воспроизведение аудио-контента на веб-страницах теперь может быть выполнено самим браузером, что полностью соответствует веб-стандартам — вы можете легко создать кнопку любого вида с помощью CSS и HTML, а потом назначить ей соответствующую функциональность, используя Audio API языка HTML5.

В этой статье мы познакомимся с тегом <audio>. начав с основ, посмотрим, как он работает в различных браузерах, а затем создадим радио-плеер, который будет использовать аудио-поток, транслируемый сервером.

Элемент <audio> прост в использовании. Для того чтобы создать плеер для проигрывания файла формата Ogg Vorbis, вам достаточно написать:

После этого браузер создаст простой плеер на веб-странице. Ниже представлен элемент <audio>. созданный браузером Opera:

Элемент <audio> имеет пять атрибутов, характерных для всех медиа-элементов в HTML5:

src содержит путь к аудио-файлу, который требуется воспроизвести. Атрибут src также может быть заменен одним или несколькими тегами <source> внутри элемента audio :

Благодаря этому вы можете использовать несколько элементов <source>. чтобы указать несколько аудио-форматов. Как вы позже убедитесь, разные браузеры поддерживают различные форматы, поэтому в идеале вам нужно указывать несколько форматов, чтобы обеспечить работу плеера во всех браузеров. Например:

autoplay — атрибут, позволяющий воспроизводить аудио автоматически, сразу после загрузки страницы.

Примечание: имейте в виду, что автозапуск раздражает многих пользователей. Если же вы используете функцию автозапуска, то предоставьте пользователю возможность приостановить воспроизведение.

autobuffer — атрибут, позволяющий начать автоматическую загрузку аудио-потока сразу после загрузки страницы без автоматического воспроизведения. Этот атрибут действует, только если не указан атрибут autoplay .

loop — атрибут, позволяющий проигрывать файл несколько раз после окончания его воспроизведения.

controls — атрибут, позволяющий показать или скрыть элементы управления плеером. Если вы не укажите этот атрибут, то элементы управления будут скрыты, а если вам необходимо создать собственные элементы управления — используйте JavaScript API и CSS для тега audio .

Элемент <audio> предоставляет мощный JavaScript API. В этой статье мы рассмотрим его лишь поверхностно, так как будем использовать один из плагинов jQuery для создания плеера, однако API все равно полезно знать.

В JavaScript мы можем вызвать объект Audio. который возвратит элемент <audio>. Обратите внимание на то, что этот элемент не будет частью объектной модели документа (DOM), пока мы явно не добавим его на страницу с помощью других функций. Однако, независимо от того является он частью DOM или нет, элемент <audio> можно контролировать через его API методы и свойства. Мы можем передать URL файла, который необходимо воспроизвести, в качестве аргумента объекта:

Мы также можем изменить атрибут src :

Обращаясь к методам audio.play() и audio.pause() можно начать или приостановить воспроизведение файла. Параметр audio.volume задает громкость, а обработчик события timeupdate запускается каждый раз, когда обновляется время воспроизведения. Этих простых методов нам будет достаточно для создания радио-плеера.

Давайте посмотрим на эти возможности в действии! Следующий скрипт создаст элемент <audio> и назначит обработчики событий к нескольким HTML-кнопкам, которые мы будем использовать для управления воспроизведением:

Скрипт, приведенный выше, применяется к такому HTML-коду:

Если вы хотите узнать больше о Audio API, я предлагаю познакомиться вам со статьей Саймона Питерса "everything you need to know about HTML5 video and audio" .

Судьба элемента <audio> очень похожа на <video> в HTML5. Было много дебатов и разногласий по поводу того, какой видео-формат использовать (более подробно об этом с статье Введение в HTML5 видео ), — и по аудио-формату были такие же горячие дискуссии. В настоящее время поддержка кодеков в популярных браузерах выглядит следующим образом:

Бесплатные HTML5 аудио плееры для вашего сайта

Несомненно, у HTML5 немалый успех, несмотря на тенденции веб-дизайна. Это новое, увлекательное, легко понятное и улучшенное по сравнению с тем, что было до этого. До недавнего это было что-то непонятное с точки зрения совместимости и определения и в результате многие из ранних заимствований HTML5 были частичными или полными катастрофами.

Первое, что следует понять - это то, где заканчивается HTML5 и начинается CSS3. HTML5 это всего лишь разметка - это набор стандартов, которые определяют как должен быть структурирован документ и как должны его интерпретировать браузеры. Вместо того, чтобы брать на себя ответственность за представление и функциональность, HTML5 возвращается к основам, позволяя нам подключаться к API и основной функциональности браузера, в то же время с помощью CSS определяя визуальный вид и поведение. В конце концов мы остались с прямым и упрощенным языком для создания веб-сайтов и приложений.

Ранее для воспроизведения произвольного аудио в браузере использовали преимущественно Adobe Flash или другие плагины браузера. И благодаря одной из интересных и самых ожидаемых функций HTML5 элемент <audio> появилась возможность воспроизведения аудио в пределах браузера, облегчает воспроизведение вашего аудио-материала онлайн. Вместо того, чтобы тратить время на исследование данной возможности, предлагаем вам сообщение, в котором расскажем вам о лучших HTML5 аудио плееры для сайтов, которые находятся в свободном доступе для использования.

MediaElement - аудио и видео-плеер, который реализован на чистом HTML5 и CSS3. Вместо того, чтобы предложить HTML5 плеер современным браузерам и совершенно отделить Flash-плеер для старых браузеров, MediaElement.js обновляет реализовав Flash и Silverlight плагины, имитирующие HTML5 MediaElement API.

MediaElement предлагает плагины для WordPress, Drupal, Joomla, JQuery, BlogEngine.NET. Детали ищите  здесь  .

SoundManager 2 позволяет облегчить воспроизведения аудио с помощью JavaScript.

  Speakker доступен в двух вариациях и с невероятными возможностями настройки: гибкая размерность, неограниченность цветов и две разных кнопки устанавливают светлые и темные темы. Легкий в настройке. Всего несколько строк Javascript и минимум CSS.

 audio.js является вставкой в ??javascript библиотеку, позволяет HTML5 тег <audio> использовать в любом месте.

Здесь используется непосредственно тег <audio> там, где это возможно и невидимый флэш-плеер для эмулирования <audio> в других браузерах. Это обеспечивает логический интерфейс HTML плеера во всех браузерах, которые могут использовать стандартные стили CSS.

Разработка HTML5 плеера

This post is also available in: Английский

С каждым годом медиа технологии все больше http://tutbelgorod.ru/   и больше входят в жизнь каждого человека. Глобальная сеть также подвержена данной тенденции, о чем свидетельствуют  успех и популярность таких сервисов как YouTube. Но работа подобных систем невозможна без технологий, позволяющих реализовать воспроизведение видео контента для пользователя.

Классическим подходом для реализации проигрывателя видео является использование технологии Flash.  Пожалуй, сложно найти более распространенный плагин для веб-браузера, чем Flash Player. Однако стоит заметить, что слабым местом подобного подхода является необходимость установки Flash plugin’а. А для многих устройств он вообще отсутствует. К примеру, настолько популярные iPhone и  iPad не имеют возможности запускать Flash-приложения в браузере. Выходом из подобной ситуации является использование HTML5.

Данный современный стандарт языка HTML принес множество нововведений. Но ключевым для нас является возможность воспроизведения видео стандартными средствами веб-браузера. Для этого в спецификацию HTML5 введен тэг <video>. Все, что Вам нужно для простого воспроизведения видео файла – лишь использовать данный тэг, правильно задав значение его атрибутам:

• Autoplay — при наличии данного атрибута со значением ‘autoplay’ воспроизведение начнется сразу после того, как загрузиться достаточны объем видео.
• Controls – значение данного атрибута, равное ‘controls’ отобразит элементы управления воспроизведением.
• Height – высота проигрывателя в пикселах.
• Loop – данный атрибут, установленный в значение ‘loop’ заставит воспроизведение видео циклично повторяться по окончанию.
• Muted – при значении ‘muted’ отключит звук у видео файла.
• Poster – данный атрибут принимает url изображения, которое будет отображаться до начала воспроизведения контента.
• Preload – атрибут определяет стратегию браузера по загрузке видео контента.  Может принимать различные значения:
  • ‘Auto’ -  если загрузка видео должна начаться при загрузке страницы.
  • ‘Metadata’ – если с загрузкой страницы должны загрузиться лишь метаданные контента.
  • ‘None’ – если при загрузке странице не должна начинаться загрузка видео.
• Src – данный атрибут содержит url файла с видео контентом.
• Width — содержит значение высоты проигрывателя.

К сожалению не все так просто. HTML5 – достаточно молодой стандарт. Так что первое, что стоит отметить  — ограниченную поддержку браузерами.  Использование тега <video> возможно в браузерах следующих версий:

• IE 9+
• Firefox 4.0+
• Chrome 6+
• Safari 5+
• Opera 10.6+

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