HTML5 видеоплееры

HTML5 видеоплееры

Привет!

Сегодня статья посвящена HTML5 видеоплеерам. Мы рассмотрим десять решений для кроссплатформенного показа видео на сайтах.

Все рассмотренные HTML5 плееры умеют использовать не только HTML5, но подключать флеш версии тогда, когда это необходимо. Почти все из них бесплатные, и подходят для коммерческого использования.

Projekktor

HTML5 видеоплеер: Projekktor

Поддерживает: H.264, webM, Theora Ogg, Vorbis Ogg, MP3, а так же проигрывание видео с YouTube. Рекомендую посмотреть таблицу совместимости для полного представления.

VideoJS

HTML5 видеоплеер: VideoJS

Не использует изображения, камтомизация полностью через CSS, бесплатный и Open Source. Поддерживает форматы: H.264, Theora Ogg, webM.

SublimeVideo

HTML5 видеоплеер: SublimeVideo

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

Поддерживает: H.264, webM, Ogg. Минус: скорее всего будет платное использование, но ценовая политика пока что недоступна. Ждем старта.

FlareVideo

HTML5 видеоплеер: FlareVideo

Открытый исходный код и бесплатное коммерческое, и частное использование. Кастомизация через HTML/CSS/JS. Требует jQuery для работы. Поддерживает: MOV, FLV, Ogg, H.264. К сожалению, не работает на iOS.

JW Player

HTML5 видеоплеер: JW Player

Флеш плеер с поддержкой HTML5 от компании Long Tail. Поддерживаем такие форматы: FLV, H.264, WebM, MP3, AAC.

OSM Player

HTML5 видеоплеер: OSM Player

Открытый плеер, использующий HTML5. Cудя по документации, его достаточно сложно интегрировать.

LeanBack Player

HTML5 видеоплеер: LeanBack Player

Не зависит от JS фреймворков, кастомизируется через CSS, имеет поддержку субтитров и локализаций.

Kaltura

HTML5 видеоплеер: Kaltura

Решение, которое уже сейчас используется на Wikimedia. Поддерживает: H.264, Ogg, FLV и MOV. Использует jQuery и jQuery UI.

Uppod HTML5

HTML5 видеоплеер: Uppod HTML5

Разработка отечественных конструкторов. Поддерживает: H.264, AAC, Ogg, webM. Поддержка флеш версии опционально.

jMediaElement

HTML5 видеоплеер: jMediaElement

Основанное на jQuery и JW player решение. Позволяет использовать субтитры.

Таблица сравнения

Ниже приведена таблица сравнения рассмотренных плееров.

 

 

 

      

HTML5 плеер JS фреймворк Flash замена iOS Полный экран Клавиатура Субтитры
Projekktor jQuery да да в пределах браузера нет нет
VideoJS да да в пределах браузера нет нет
Sublime Video да да да нет нет
FlareVideo jQuery да да Play / Pause нет
JW Player jQuery да да нет нет нет
OSM Player jQuery да да в пределах браузера нет нет
LeanBack Player да да да да да
Kaltura jQuery да да в пределах браузера нет нет
Uppod HTML5 опционально да в пределах браузера Pause нет
jMediaElement jQuery да да с плагином да да

Как всегда, вопросы, дополнения и комментарии приветствуются.

 

 

 

 

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 34

Никита Лебедев
спасибо, дельно.
а почему перестали в твиттере уведомлять о новых статьях?)
Grin
Никита, статьи у нас можно публиковать автоматически. Эту я написал вчера днем и поставил на публикация сегодня в 10 утра. Но в 10 утра я еще спал ;-)
Рустам
Спасибо, только возник вопрос, плеер во весь экран можно поставить только в окне браузера я так понимаю?
#
Рустам  
Grin
Рустам, зависит от реализации и браузера
Алекс
Спасибо, классные плееры
Sam Dark
Вроде Flowplayer теперь умеет использовать HTML5.
Рустам
Grin, спасибо, понял
#
Рустам  
Ilya
Скажите что за js скрипт у вас подгружает картинки во время прокрутки страницы?
Много раз такое видел, найти не могу...
#
Ilya
Grin
Ilya, это плагин Lazy Load
Влад Никольский
Преогромнейшее спасибо! Просто устал уже искать в сети плейер для сайта. Проблема моя в том, что я ищу кодировку, соответствующую w3c стандарту.
Конечно, попробую ваши плейеры, но если не очень затруднит, скажите, пожалуйста, какой из них соответствует стандарту кодировки w3c. Заранее спасибо.
Либерти
Отличный обзор плееров! А есть статья на тему Будущее HTML плееров? Интересно, к чему нас прогресс приведет.
Alexander
JW Player работает уже в полноэкранном режиме!
#
Alexander
Alexander
Сорри, то флешем видео проигрывалось.
#
Alexander
Narwen
JW Player субтитры умеет воспроизводить с плагином caption. Почти все сайты о кино (киномания.ру, кино-говно.ру, филмз.ру и тд) его используют, к плюсам можно отнести простую настройку и наличие плагинов для друпала, вордпресса и джумлы. Минус - иконка в бесплатной версии.
#
Narwen
CoverYourEyes
У VideoJS имеется плюс в наличии плагинов для Drupal и Wordpress.
Alexandr
А у меня последнее время ФайрФокс какой-то плагин требует для проигрывания видео, начинаю обновлять, говорит "нет обновлений", но требовать - требует при загрузке страниц. В чем дело?
WebMaster
с этим хтмл все поехали и это очень хорошо!
azzepis
Я так и не понял, avi-шки простые в mpeg4 никакой из них не играет? вчера просто залил на сервер себе ави-шку, и хотел попробовать от-туда её через браузер посмотреть... не нашёл подходящего плеера :(
Markus
Спасибо за плееры :)
texrek
Прикольно. Спасибо за обзор плееров. Кстати он похож на KMPlayer.
mac
Платформу хтмл 5 поддерживает Apple, а она еще никогда не ошибалась.
#
mac  
mac
Кстати, на айфонах, айпадах и прочих хтмл 5 тоже работает.
#
mac
Сергей
А в чём разница html 5 и html4 ?
z-bone
Спасибо, очень пригодилось
Drakamil
Интересная статья, правда, JwPlayer поддерживает субтитры (xml и srt).
Алвид
Больше всего мне понравился LINKBACK Player.
Муслим
а как вставить на сайт плеер
#
Муслим
Aleksov
Вот мой вариант HTML5 аудио / видео плеера с поддержкой воспроизведения потокового контента
http://set-pro.net/scr/ptmedia/
#
Aleksov
home
Я пользуюсь KMplayer. Мне кажется что он лучший в свое роде. Подходит как для кино так и для сериалов. Все оптимальные настройки присутствуют.
plutov
Спасибо за статью. Я когда-то писал как кодировать видео в H264 через FFMPEG: http://plutov.by/post/html5_ffmpeg
Максим
Хочу выложить сериал на сайте. Файлы хранятся на видеохостинге moevdeo.net. хочется что бы в плеере присутствовал плейлист. Можно ли так сделать и как? Пробовал разные плееры так и не понял есть ли в них такие функции или нет. Сайт на wordpress.
#
Максим
Михаил
Вот урок по созданию видео проигрывателя - http://siteacademy.ru/index.php/html/44-video-player
#
Михаил

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть

metin2 pvp metin2 pvp serverler pvp serverler