Удобный и простой HTML5-плеер Plyr

Plyr — это гибкий и легко настраиваемый медиа-плеер, построенный на базе HTML5. Он поддерживает различные типы медиа-файлов, включая видео и аудио, и предоставляет широкий набор функций для управления воспроизведением.

Что это за программа

Plyr Player является классическим плеером для ресурса глобальной сети. Особенностью софта является поддержка субтитров, устройств для чтения с экрана. Он незаменим в работе с Vimeo и YouTube. Считается открытым исходным кодом с условно бесплатным распространением контента. Обладает встроенным полноэкранным режимом, настройкой качества картинки, поддержкой HLS, DASH, Shaka. Отличается малогабаритностью в объеме.

Функции и возможности

Что делает Plyr таким удобным и популярным среди разработчиков?

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

Во-вторых, Plyr обладает богатым набором функций. Он позволяет:

  • управлять воспроизведением;
  • регулировать громкость;
  • переходить по времени;
  • создавать плейлисты и многое другое.

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

Plyr имеет открытый исходный код, что значит, что пользователь может вносить изменения и настраивать его под свои нужды. Это дает полный контроль над плеером и позволяет создавать уникальные и индивидуальные медиа-проигрыватели для своих проектов.

Где можно установить

Plyr — это бесплатная и открытая программа, разработанная на HTML5, CSS и JavaScript. Самый простой способ — это загрузить Plyr с официального сайта разработчика. Там можно выбрать нужную версию Plyr и загрузить на компьютер. Утилита также доступна через пакетные менеджеры, такие как npm или Yarn.

Скачивание и установка

Скачать программу можно с официального сайта. Перейдя по ссылке, пользователю потребуется выполнить стандартную загрузку. Чтобы установить плеер на сайт, потребуется сделать следующие шаги:

  • добавить к плееру видео — зайти в открытый код, вписать <video id=»player» playsinline controls> <source src=»путь к видео» type=»video/mp4″ /> </video>;
  • прикрепить JS-файл, оболочку плеера, положить в корневую папку портала;
  • прописать код <script src=»путь к файлу»></script> <script> const player = new Plyr(‘#player’); </script>;
  • добавить стиль CSS, вложить в корневую папку и вставить код <link rel=»stylesheet» href=»путь к файлу» />.

На этом скачивание и установка софта на сайт закончена. Шрифта в комплекте нет. Его можно скачать в Google Fonts и встроить в код в теге font-family.

Интерфейс

Основная особенность программы Plyr — это ее гибкость интерфейса, простота настройки. Пользователь может легко настроить внешний вид и поведение плеера с помощью CSS, а также добавить собственные кнопки управления, элементы интерфейса. С помощью программы потребитель может создать привлекательный, интерактивный контент на своем сайте, который легко воспроизводится и привлекает внимание пользователей.

фото 220124_23

Интерфейс утилиты поддерживает считыватели экрана, весит 4,8 килобайт после сжатия, корректируется по мере надобности. Он дает быстрый ожидаемый отклик. В нем встроено Symaphores для корректировки громкости. Интерфейс совместим с любым браузером, поддерживает нативный полный экран. Для его использования не нужно jQuery.

Полезно также почитать: Video Player HTML5

Инструкция по использованию

Первым шагом в использовании Plyr является подключение его к проекту. Для этого понадобится скачать, включить необходимые файлы в код. Сделать это можно двумя способами:

  • Локальным подключением. Скачать архив с файлами Plyr с официального сайта и распакуйте его. Затем скопировать необходимые файлы в папку проекта и подключить в HTML.
  • Использованием на веб-странице.

После успешного подключения Plyr к проекту, можно использовать его для встраивания и управления медиа-контентом на веб-страницах. Для этого понадобится создать контейнер, в котором будет размещаться плеер, и указать необходимые атрибуты и настройки. Пример кода: <iframe src=»https://www.youtube.com/embed/VIDEO_ID»>, const player = new Plyr(‘#player’).

В Plyr имеет множество дополнительных настроек, которые позволяют настроить плеер под потребности. Некоторые из наиболее полезных настроек включают определение начальной позиции видео, автовоспроизведение, отключение контролов и другие. Пример: player.play(); // Старт воспроизведения, player.fullscreen.enter(); // Открыть полный экран.

Плюсы и минусы

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

  • Простота использования: имеет интуитивно понятный интерфейс, что делает его легким в освоении даже для новичков.
  • Кросс-платформенность: поддерживает воспроизведение медиафайлов на различных устройствах и платформах, включая компьютеры, планшеты и мобильные устройства.
  • Поддержка различных форматов: софт способен воспроизводить аудио и видео в разных форматах, включая MP4, WebM, Ogg и другие.
  • Конфигурация: утилита предлагает широкий набор настроек, которые позволяют настраивать его под индивидуальные потребности пользователя.
  • Поддержка субтитров: Plyr поддерживает добавление и отображение субтитров, что делает его идеальным выбором для видео с переводом или глухими.
  • Гибкость: Плур предоставляет множество опций для управления воспроизведением, включая паузу, перемотку, регулировку громкости и т. д.
  • Поддержка интерактивных элементов: софт позволяет добавлять интерактивные элементы, такие как кнопки управления воспроизведением, встроенные ссылки и т. д.
  • Совместимость с различными плагинами: Плур совместим с различными плагинами и расширениями, которые обогащают его функциональность.
  • Открытый исходный код: Плур является программным обеспечением с открытым исходным кодом, что позволяет разработчикам вносить изменения и улучшения.
  • Активное сообщество: Plyr имеет большое и активное сообщество пользователей и разработчиков, которые готовы помочь и поделиться своим опытом.

Минусы:

  • Ограниченные возможности настройки внешнего вида: софт имеет ограниченный набор стилей и дизайн не всегда может соответствовать внешнему виду вашего сайта.
  • Возможность несовместимости с некоторыми браузерами: программа может не работать должным образом в некоторых старых версиях браузеров, что может привести к проблемам с воспроизведением.
  • Отсутствие некоторых продвинутых функций: некоторые продвинутые функции, такие как стриминг или поддержка VR, могут отсутствовать в софте.
  • Возможные проблемы с производительностью: в некоторых случаях утилита может вызывать задержки или проблемы с производительностью, особенно при работе с большими медиафайлами.
  • Ограничение в функциональности плеера: Plyr, хотя и предоставляет множество возможностей, может быть ограничен в функциональности по сравнению с другими профессиональными плеерами.

Plyr на базе HTML5 является мощным инструментом для воспроизведения аудио и видео на веб-сайтах, но имеет и некоторые ограничения. Согласно мнению отзывов пользователей, программа простая в работе, потому пользуется популярностью.

Пользователям нравится одна из особенностей Plyr, а именно, возможность настройки. Человек может легко настроить внешний вид плеера, добавить пользовательские элементы управления и даже создать собственную тему. Это дает полный контроль над воспроизведением контента на сайте, позволяя создать уникальный и стильный видеоплеер.

Аналоги

Аналогами популярного софта выступают четыре популярные программы:

  • JW Player. JW Player назывался изначально бесплатным продуктом, сегодня он превращается в платную многофункциональную платформу. Бесплатная версия доступна для некоммерческих задач. Софт дает комплексную аналитику, дает настройку воспроизведения HTML5. Он отлично годится для WordPress порталов, совмещается с рядом популярных СМS.
  • Cloudinary. Cloudinary — видеоплеер на портале, использующийся в основном крупными организациями и предприятиями. Дает осуществлять воспроизведение роликов в высоком качестве. При том скорость загрузки не теряется. Есть ряд инструментов для обработки с кодировкой видеофайлов. Видеоплеер предоставляет хостинговые услуги. Добавить плеер на портал возможно с помощью embed кода. В наличии аналитические инструменты для просмотра связи, отклика с аудиторией
  • Shaka Player. Shaka Player — бесплатный софт, который можно использовать в оффлайн режиме. За счет использования в нем открытого исходного кода, можно делать настройку софта под личные запросы.
  • Video.js. Считается самым популярным встраиваемым плеером на портале. Подключается на 300 000 веб-ресурсах со внушительным трафиком. Софт способен стремительно воспроизводить видеоролики на мобильном, планшетном оборудовании и стационарных ПК.

В заключение, Plyr на HTML5 — это программа, которая обеспечивает простоту использования, богатый набор функций, кросс-браузерную совместимость и возможность настройки под конкретные нужды. Если нужен медиа-плеер для веб-сайта или приложения, Plyr — отличный выбор.

Комментарии

Подпишись на 3d graphics

Информация о мире трехмерной графики. Уроки, советы, новости и материалы о создании и визуализации 3D-графики.

Подписаться!