5 Great HTML5 Video Players — SitePoint
Web
Поделиться
Был растущий спрос на создателей, чтобы разработать свою собственную пользовательскую видео платформу, которую они могут использовать для продвижения своей собственной рекламы, маркетинговые или брендинговые цели. Хотя YouTube и другие подобные платформы, как правило, более перспективны, размещение видео самостоятельно и использование видеоплеера по вашему выбору дает больше контроля над тем, как используются ваши видео.
Независимо от того, являетесь ли вы создателем видео на YouTube или влиятельным лицом в социальных сетях, мы составили список из 5 лучших видеопроигрывателей HTML5. Этот список был составлен с учетом нескольких важных потребностей, таких как:
- Быстрый и отзывчивый
- Простота установки и использования
- Коэффициент совместимости между браузерами
- Надежные и универсальные варианты списков воспроизведения
- Возможность включения рекламы на разных этапах видео — до, во время или после
- Возможность интеграции размещенных на собственном хостинге видео с видео с таких каналов, как YouTube, Dailymotion, Vimeo и т.
д.
д.Теперь, когда у нас есть представление о том, что искать, вот список из 5 лучших видеоплееров HTML5.
VideoJS
VideoJS — видеопроигрыватель HTML5 с открытым исходным кодом, созданный с использованием JavaScript и CSS. Это видеоплеер HTML5 с дополнительной поддержкой Flash. Наличие Flash в качестве запасного варианта особенно полезно, когда вы используете его в браузерах, не поддерживающих HTML5. Он может расширить свою поддержку на Vimeo и YouTube.
Запущенный в 2010 году, VideoJS в настоящее время обслуживает более 400 000 веб-сайтов в Интернете. VideoJS одинаково совместим как с мобильными устройствами, так и с настольными компьютерами.
Некоторые из основных функций VideoJS включают:
- Поддержка плагинов: VideoJS поддерживает несколько плагинов, таких как аналитика, реклама, списки воспроизведения, а также поддержку расширенных форматов, таких как HLS и DASH. Полный список поддерживаемых плагинов можно найти на странице плагинов VideoJS.
- Skinning: все в VideoJS настраивается. Вы можете легко настроить его внешний вид, отредактировав стиль CSS. У Стива Хеффернана есть демо-версия codepen для настройки скина VideoJS, которая должна помочь вам начать работу.
- Готовая адаптируемость к различным плагинам делает этот плеер намного полезнее. Некоторые примеры плагинов включают в себя:
- Analytics: возможность отслеживать события Google Analytics из проигрывателя VideoJS
- Бренд: Вы можете добавить логотип вашего бренда на плеер
- Плейлист: Поддержка плейлистов
- Chromecast: возможность транслировать видео на устройство с помощью устройства Chromecast
JW Player
JW Player существует уже много лет и является одним из самых популярных Flash-видеоплееров в Интернете. Позже он расширил поддержку воспроизведения видео HTML5. JW Player полностью настраиваемый, имеет отзывчивое видео HTML5 и имеет широкий спектр функций, начиная от поддержки аналитики и заканчивая специальными возможностями и полным управлением видео HTML5.
Возможно, это лучший видеоплеер для веб-сайтов с широким набором решений, поддерживающих видео. JW player также очень хорошо работает в качестве видеоплеера HTML5 для веб-сайтов WordPress. Его также можно использовать в качестве альтернативы видеоплееру YouTube. Интересно, что до того, как Google купил YouTube, оригинальный видеоплеер YouTube был основан на JW Player.
Одна из ключевых причин того, что JW Player превосходит своих конкурентов в этой категории, из-за огромного количества функций, которые он предоставляет с помощью ряда различных дополнений. Они могут варьироваться от рекламных партнерств до скрытых субтитров, а также популярных инструментов социальных сетей.
Как упоминалось ранее, плеер полностью настраиваемый и поддерживает ряд пользовательских тем оформления. Он также поставляется с интегрированным API. Он имеет ряд различных плагинов для поддержки более популярных CMS, что делает интеграцию довольно простой.
Kaltura HTML5 Video Player
Kaltura Player — это бесплатный HTML5-видеопроигрыватель с открытым исходным кодом, который можно использовать для создания нескольких пользовательских межбраузерных и межустройственных обложек, которые могут соответствовать или дополнять дизайн Ваш сайт.
Плеер Kaltura поставляется с многочисленными шаблонами проигрывателя на выбор.
Некоторые из основных характеристик:
- Надежность, всесторонняя производительность
- Многоплатформенная поддержка
- Реклама и аналитика: поддерживает большинство рекламных форматов, включая VAST v. 3.0, а также интегрированные плагины, которые можно использовать в самых разных сетях видеорекламы. К ним относятся рекламная платформа Google Doubleclick, FreeWheel, Eye Wonder, Ad Tech, Tremor Video, AdapTV и многие другие.
Flowplayer
Flowplayer — очень простой видеоплеер для авторов, которые хотят включить воспроизведение видео на своих веб-сайтах. Процесс интеграции и разметки для Flowplayer очень прост, что является одним из его основных преимуществ.
Прежде всего, важно отметить, что Flowplayer в первую очередь предназначен для тех создателей, которые самостоятельно размещают видеофайлы. Если создатели используют службу потоковой передачи, такую как Vimeo или YouTube, обе службы потоковой передачи предоставляют код, который можно использовать для встраивания самого проигрывателя на веб-сайт или целевую страницу.
Flowplayer на 100 % настраивается, а также имеет различные скины и поддерживает включение субтитров, изменение скорости воспроизведения, включая видеоаналитику и возможности монетизации.
Wistia
Wistia — это видеопроигрыватель HTML5, предназначенный для бизнеса. Он оптимизирован для обеспечения лучших в своем классе возможностей просмотра благодаря поддержке видео высокого разрешения и адаптивной потоковой передачи. Он отдает приоритет вовлечению зрителей и может обеспечивать воспроизведение видео, измененное в зависимости от среды просмотра и скорости соединения.
Прост в использовании, а легкие коды для встраивания позволяют быстро и просто интегрировать его на ваш сайт. Он также оптимизирует видео в зависимости от размера экрана зрителя.
Встроенная видеоаналитика Wistia предоставляет практически в реальном времени и полезные данные о том, как зрители взаимодействуют с вашими видео, и какие видео работают лучше всего с точки зрения коэффициентов конверсии.
Дополнительные инструменты/библиотеки и проигрыватели
Теперь, когда мы рассмотрели наши 5 лучших видеоплееров HTML5, вот еще несколько заслуживающих внимания упоминаний.
Видеоплеер Cloudinary
Видеоплеер Cloudinary HTML5 — это медиаплеер на основе JavaScript, который можно настраивать и использовать для аналитики. Тем не менее, видеоплеер Cloudinary отличается от остальных тем, что он тесно интегрирован с инструментами и услугами для обработки видео, которые они предлагают. Преобразование видео происходит на уровне игрока и происходит «на лету». Кроме того, вы можете подключить их библиотеку транскодера видео к другим проигрывателям HTML5, используя их конечные точки API.
Plyr
Plyr — это простой, настраиваемый и довольно легкий видеоплеер HTML5. Он также поддерживает видеоплеер YouTube. Легкий дизайн делает его довольно популярным как среди профессионалов, так и среди создателей любительского контента.
Некоторые ключевые особенности:
- Всесторонняя поддержка программ чтения с экрана, а также VTT
- Позволяет пользователям изменять внешний вид в соответствии с общей тематикой своего веб-сайта
- Поддерживает широкий спектр функций редактирования и обработки
MediaElement.
jsMediaElement.js — это высокотехнологичный аудио- и видеоплеер на основе HTM5. Он использует прокладки Silverlight вместе с Flash. Это позволяет ему иметь согласованный пользовательский интерфейс во всех браузерах.
Некоторые ключевые особенности:
- Полная поддержка CSS и HTML
- Использует WebTT для обеспечения эффективных стандартов доступности
Afterglow Player
Благодаря хорошо разработанному интерфейсу проигрывателя Afterglow Player представляет собой уникальную и быстро реагирующую платформу. Он может поддерживать почти видеоэлементы с минимальными усилиями, учитывая простой и понятный процесс инициализации.
Основные характеристики:
- Простая настройка и интерактивный пользовательский интерфейс
- Поддержка широкого спектра форматов видеофайлов
- Сравнительно быстрое время отклика
Заключение
На сегодняшний день существует множество вариантов видеопроигрывателей HTML5.
Ключом к правильному выбору для вас является поиск проигрывателя, который может удовлетворить большинство или все ваши потребности в воспроизведении видео.
Важно убедиться, что в конечном итоге вы используете видеопроигрыватель, который в конечном итоге окажется раздутым или излишне тяжелым решением, которое не может обеспечить работу в ключевых областях, на которых вы хотели бы сосредоточиться.
Поделиться этой статьей
Гилад Мааян
Гилад Давид Мааян — писатель по технологиям, который работал с более чем 150 технологическими компаниями, включая SAP, Oracle, Zend, CheckPoint и Ixia, создавая технические и передовые материалы, разъясняющие технические решения для разработчиков. и лидерство в сфере ИТ.
Учебники и статьи по HTML5видео
YouTube переключается на видеопроигрыватель HTML5
Домашняя страница InfoQ Новости YouTube переходит на видеоплеер HTML5
Лея Эм португальский
Lire ce contenu en французский
Закладки
29 января 2015 г.
2
мин читать
по
- Дэвид Иффланд
Напишите для InfoQ
Присоединяйтесь к сообществу экспертов. Повысьте свою видимость.Развивайте свою карьеру.Подробнее
В январе 2010 года YouTube запустил экспериментальный видеопроигрыватель HTML5. После пяти лет сотрудничества с другими поставщиками браузеров и сообществом они объявили, что видео HTML5 теперь отображаются по умолчанию для определенных браузеров, отбрасывая предыдущий видеопроигрыватель Adobe Flash.
В своем блоге технический менеджер YouTube Ричард Лейдер сказал, что поддержка технологии Adaptive Bitrate (ABR) была ключевым фактором в их решении:
Потоковая передача с адаптивным битрейтом (ABR)имеет решающее значение для обеспечения качественного видео для зрителей, позволяя нам быстро и плавно настраивать разрешение и битрейт в условиях меняющихся условий сети.
Рассматриваемый ABR представляет собой динамическую адаптивную потоковую передачу через HTTP, известную как MPEG-DASH. По словам Росса Гардлера из Microsoft Open Technologies, MPEG-DASH снижает потребность в буферизации:
При использовании MPEG-DASH видеопоток автоматически снижается до более низкого разрешения, когда сеть становится перегруженной. Это снижает вероятность того, что зритель увидит «приостановленное» видео, пока проигрыватель загружает следующие несколько секунд для воспроизведения (так называемая буферизация). Когда перегрузка сети уменьшится, видеоплеер, в свою очередь, вернется к потоку более высокого качества.
Действительно, Лейдер говорит, что «ABR сократил буферизацию более чем на 50 процентов в глобальном масштабе и на целых 80 процентов в сильно перегруженных сетях». В интервью 2014 года Лейдер сказал, что «воспроизведение YouTube использует DASH на телевизорах, игровых консолях, телевизионных приставках, Chromecast, браузерах настольных компьютеров, мобильном Интернете [и] мобильных телефонах».
Воспроизведение MPEG-DASH доступно в браузерах, поддерживающих W3C Media Source Extensions (MSE), поэтому переключение проигрывателя YouTube HTML5 ограничено Chrome, IE 11, Safari 8 и некоторыми бета-версиями Firefox. Согласно спецификации, MSE «позволяет JavaScript динамически создавать медиапотоки для <аудио> и <видео>. Он определяет объекты, которые позволяют JavaScript передавать медиасегменты». Веб-разработчики могут создавать свои собственные видеопроигрыватели с поддержкой DASH, используя эталонную реализацию dash.js.
Другие поставщики видео находятся на разных этапах поддержки HTML5. Vimeo перешел на проигрыватель HTML5 по умолчанию в январе 2014 года, а Netflix использует видеопроигрыватель HTML5 в IE11 и Safari в Yosemite. Другие, такие как BBC, реализовали видео HTML5 только на таких платформах, как iOS от Apple, где Flash никогда не был доступен.
До сих пор YouTube разрешал пользователям использовать проигрыватель HTML5, если его поддерживал браузер.
Теперь пользователи, посещающие эту страницу в совместимом браузере, увидят, что «проигрыватель HTML5 в настоящее время используется, когда это возможно». Это изменение значительно сократит количество времени, в течение которого используется проигрыватель на основе Flash, и приблизит Flash к неактуальности.
YouTube рекомендует разработчикам использовать API