Плейлисты для плеера 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, а в самом плеере.

Кот устал
Кот прыгает
Манул

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

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

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

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

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

Комментарии:

  • Анатолий:

    Здраствуйте! Есть вопрос. По какой причине могут не воспроизводиться видео, нажимая на кнопки (плеер Youtube), просто ничего не происходит:(

    Ответить
    • Alexander:

      У меня не воспроизводятся, потому что стоит возрастное ограничение (заменю позже видео).
      А так не знаю… результат бы нужно увидеть…

      Ответить
      • Анатолий:

        У меня теперь они воспроизводяться, но не все, не части просто пишет 'Видео недоступно'…

        Ответить
        • Alexander:

          Скорее всего ошибка в ID видео (30BQjlXXamY)

          Ответить
          • Анатолий:

            Я уже много раз перепроверил ошибок вроде нет..

            Ответить
            • Alexander:

              Тогда нужна ссылка на результат, погляжу почему не работает

              Ответить
              • Анатолий:

                Могу тогда, скинуть вам на почту архив с страницой? (просто я новичок в этом, и там довольно много написано кривовато, но меня только проблема с плеером интересует)

              • Alexander:

                Скидывайте, почта в контактах есть.

              • Анатолий:

                Скинул вам на почту!!

  • Вячеслав:

    В плей-листе YouTube куча ошибок в консоли. Как исправить?

    Ответить
  • Беркин:

    А как добавить pdf файл? например в плейлисте в первой кнопке видео, а во второй чтобы пдф файл открылся?

    Ответить
    • Alexander:

      А причем тут pdf и видео?

      Ответить
  • Константин:

    Плейлист HTML5 видео не запускается. Видны только картинки, а самого окна с видео нет. Что не так?

    Ответить
  • Андрей:

    У меня почему-то не воспроизводится видео, когда использую плеер…

    Ответить
    • Alexander:

      Ну тут пример нужен, так не угодаешь 🙂

      Ответить
  • Андрей:

    А в плейлисте видео как размещается?В прокрутке или квадратами?

    Ответить