Plyr имеет большое количество настроек, а также поддерживает субтитры в формате WebVTT (Web Video Text Tracks). Инструмент имеет небольшой размер (в сжатом виде всего 6.4KB ), легко настраивается и поддерживается всеми современными браузерами. Конечно же, в сети можно найти много других медиа плееров, но HTML5 плеер Plyr проще в обращении чем остальные, к тому же использует в своей работе только семантические HTML-элементы (например, <input type="range"> для управления звуком и <progress> для отображения продолжительности ролика). Еще одним несомненным преимуществом этого плеера является то, что он написан на «чистом» javaScript и не требует подключения сторонних библиотек.
Также разработчики обеспечили плееру полную поддержку взаимодействия со средствами для чтения с экрана.
Чтобы разместить HTML5 плеер Plyr у себя на сайте, нам можно воспользоваться следующей разметкой:
HTML
Кроме того, в разделе <head> страницы нужно подключить файлы стилей плеера. Весь CSS-код плеера хранится в двух файлах: plyr.css и docs.css.В docs.css находятся стили, которые применяются к основным HTML-элементам страницы, где размещен плеер, а в plyr.css описаны классы, которые прикрепляются в элементам интерфейса плеера. Перед закрывающимся тегом </body> подключаются javaScript файлы HTML5 плеера. Их тоже 2: plyr.js и docs.js.
JS-код, который запускает работу плеера, в самом простом виде выглядит так:
HTML
Как вы можете догадаться, методу setup() можно передавать различные параметры. Как и во всех аналогичных инструментах, здесь параметры можно передать в виде объектного литерала (plyr.setup({...}) ). Список параметров доступен на странице проекта на GitHub. Там же вы сможете скачать HTML5 плеер Plyr.
Помимо описания API плеера на указанной странице можно найти и другую полезную информацию: о поддержке плеера различными браузерами, а также список ссылок на другие ресурсы, посвященные HTML5 плеер Plyr.
Демонстрацию работы плеера Вы сможете посмотреть на его официальной странице или после установки на ваш локальный веб-сервер, открыв файл /docs/index.html из загруженного архива.