Плейлисты для плеера Plyr

Медиаплеер Plyr — простой, легко настраиваемый и красивый плеер с массой настроек, событий и методов.

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

Очень подробное описание этого плеера дано в теме: "Медиа-плейер Plyr для HTML5, YouTube и Vimeo", а в этой только плейлисты

Плейлист HTML5 аудио

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

Get A Move On
Boots Boots Boots
Greek Dance
Vanishing Horizon

В данном коде <audio id="player"></audio> - это сам проигрыватель, а ниже кнопки с треками, в которых атрибут data-audio указывает прямой путь к файлу.

Плейлист HTML5 видео

Как и аудио, плеер поддерживает разные форматы видеофайлов, но в примере использованы только mp4 и постер.

Outback
Working Man
Platform

В данном коде <video id="player"></video> - это сам проигрыватель, а ниже кнопки с треками, в которых атрибут data-video указывает прямой путь к видеофайлу, а data-poster к его постеру.

Плейлист YouTube видео

Плейлист для YouTube делается по принципу HTML5 видео, только источник по умолчанию указывается не в JS, а в самом плеере.

RE2 - Classic Costumes
RE2 - Launch Trailer
RE2 - The Ghost Survivors

В данном коде <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="30BQjlXXamY"></div> - это проигрыватель с данными видео по умолчанию, а ниже кнопки с треками, в которых атрибут data-youtube - ссылка на видео с youtube или его ID.

Плейлист для Vimeo я делать не стал, т.к. он не так популярен и делается аналогично плейлисту с YouTube, только с другим провайдером и ID

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!