Очень подробное описание этого плеера дано в теме: "Медиа-плейер Plyr для HTML5, YouTube и Vimeo", а в этой только плейлисты
Плейлист HTML5 аудио
Данный плеер поддерживает разные форматы аудиофайлов, но в примере я использовал только mp3. Если используется другой формат, то нужно поменять тип в JS, а если используются несколько форматов, то добавить их по аналогии.
Get A Move On
Boots Boots Boots
Greek Dance
Vanishing Horizon
|
1 2 3 4 5 6 7 |
<div class="player-container"> <audio id="player"></audio> <div class="change-audio active" data-audio="GetAMoveOn.mp3">Get A Move On</div> <div class="change-audio" data-audio="BootsBootsBoots.mp3">Boots Boots Boots</div> <div class="change-audio" data-audio="GreekDance.mp3">Greek Dance</div> <div class="change-audio" data-audio="VanishingHorizon.mp3">Vanishing Horizon</div> </div> |
В данном коде <audio id="player"></audio> - это сам проигрыватель, а ниже кнопки с треками, в которых атрибут data-audio указывает прямой путь к файлу.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.player-container { max-width: 500px; margin: 20px auto; } .change-audio { font-family: 'Roboto', sans-serif; font-size: 18px; cursor: pointer; margin: 4px 0; padding: 6px 10px; border: 1px solid #ddd; transition: all 300ms; background: #FFF; } .change-audio:hover { border: 1px solid #00b3ff } .change-audio.active { background: #00b3ff; color: #FFF; border: 1px solid #00b3ff } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
const player = new Plyr('#player', { invertTime: false, }); player.source = { type: 'audio', sources: [ { src: 'GetAMoveOn.mp3', // Путь к треку по умолчанию type: 'audio/mp3' } ] }; $(function() { // Включение трека по клику $('.change-audio').click(function(){ $('.change-audio').removeClass('active'); $(this).addClass('active'); let audiourl = $(this).attr('data-audio'); player.source = { type: 'audio', sources: [ { src: audiourl, type: 'audio/mp3' } ] }; player.play(); }); // Переключение трека на следующий по окончанию player.on('ended', event => { let nextaudio = $('.change-audio.active').next(".change-audio"); let urlnextaudio = nextaudio.attr('data-audio'); if (!urlnextaudio) { player.stop(); } else { $('.change-audio').removeClass('active'); nextaudio.addClass('active'); player.source = { type: 'audio', sources: [ { src: urlnextaudio, type: 'audio/mp3' } ] }; player.play(); } }); }); |
Плейлист HTML5 видео
Как и аудио, плеер поддерживает разные форматы видеофайлов, но в примере использованы только mp4 и постер.
Outback
Working Man
Platform
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="video-container"> <video id="player"></video> <div class="video-list"> <div class="change-video active" data-video="Outback.mp4" data-poster="Outback.jpg"> <img src="Outback.jpg" /> <span>Outback</span> </div> <div class="change-video" data-video="WorkingMan.mp4" data-poster="WorkingMan.jpg"> <img src="WorkingMan.jpg" /> <span>Working Man</span> </div> <div class="change-video" data-video="Platform.mp4" data-poster="Platform.jpg"> <img src="Platform.jpg" /> <span>Platform</span> </div> </div> </div> |
В данном коде <video id="player"></video> - это сам проигрыватель, а ниже кнопки с треками, в которых атрибут data-video указывает прямой путь к видеофайлу, а data-poster к его постеру.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.video-container { margin: 20px; } .video-list { display: flex; } .change-video { box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2); margin-top:20px; margin-bottom:10px; border: 6px solid #BFE2FF; transition: box-shadow 0.3s linear; cursor: pointer; background: #BFE2FF; } .change-video:nth-child(2) { margin-left: 16px; margin-right: 16px; } .change-video span { display: block; padding: 6px 12px 0 12px; font-size: 18px; font-family: 'Roboto', sans-serif; } .change-video:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .change-video.active { border: 6px solid #00b3ff; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); color: #FFF; background: #00b3ff; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
const player = new Plyr('#player', { invertTime: false, }); player.source = { type: 'video', poster: 'Outback.jpg', // Путь к постеру по умолчанию sources: [ { src: 'Outback.mp4', // Путь к постеру по умолчанию type: 'video/mp4', size: 720 } ] }; $(function() { // Включение трека по клику $('.change-video').click(function(){ $('.change-video').removeClass('active'); $(this).addClass('active'); let videourl = $(this).attr('data-video'); let videoposter = $(this).attr('data-poster'); player.source = { type: 'video', poster: videoposter, sources: [ { src: videourl, type: 'video/mp4', size: 720 } ] }; // player.play(); // если нужно запускать видео сразу по клику, раскомментируйте эту строчку }); // Переключение аидео на следующее по окончанию player.on('ended', event => { let nextvideo = $('.change-video.active').next(".change-video"); let urlnextvideo = nextvideo.attr('data-video'); let urlnextposter = nextvideo.attr('data-poster'); if (!urlnextvideo) { player.stop(); } else { $('.change-video').removeClass('active'); nextvideo.addClass('active'); player.source = { type: 'video', poster: urlnextposter, sources: [ { src: urlnextvideo, type: 'video/mp4', size: 720 } ] }; // player.play(); // если нужно сразу запускать следующее видео, раскомментируйте эту строчку } }); }); |
Плейлист YouTube видео
Плейлист для YouTube делается по принципу HTML5 видео, только источник по умолчанию указывается не в JS, а в самом плеере.
Кот устал
Кот прыгает
Манул
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="youtube-container"> <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="sox0tZuqpQA"></div> <div class="youtube-list"> <div class="change-youtube active" data-youtube="sox0tZuqpQA"> <img src="https://img.youtube.com/vi/sox0tZuqpQA/mqdefault.jpg" /> <span>Кот устал</span> </div> <div class="change-youtube" data-youtube="V4WXyOVPQrQ"> <img src="https://img.youtube.com/vi/V4WXyOVPQrQ/mqdefault.jpg" /> <span>Кот прыгает</span> </div> <div class="change-youtube" data-youtube="AzK6NFoBPXs"> <img src="https://img.youtube.com/vi/AzK6NFoBPXs/mqdefault.jpg" /> <span>Манулr</span> </div> </div> </div> |
В данном коде <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="sox0tZuqpQA"></div> - это проигрыватель с данными видео по умолчанию, а ниже кнопки с треками, в которых атрибут data-youtube - ссылка на видео с youtube или его ID.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
.youtube-container { margin: 20px; } .youtube-list { display: flex; } .change-youtube { box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2); margin-top:20px; margin-bottom:10px; border: 6px solid #BFE2FF; transition: box-shadow 0.3s linear; cursor: pointer; background: #BFE2FF; } .change-youtube:nth-child(2) { margin-left: 16px; margin-right: 16px; } .change-youtube span { display: block; padding: 6px 12px 0 12px; font-size: 18px; font-family: 'Roboto', sans-serif; } .change-youtube:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } .change-youtube.active { border: 6px solid #00b3ff; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); color: #FFF; background: #00b3ff; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
const player = new Plyr('#player', { invertTime: false, }); $(function() { // Включение трека по клику $('.change-youtube').click(function(){ $('.change-youtube').removeClass('active'); $(this).addClass('active'); let youtubeurl = $(this).attr('data-youtube'); player.source = { type: 'video', sources: [ { src: youtubeurl, provider: 'youtube' } ] }; // если нужно запускать видео сразу по клику, раскоментируйте строчки ниже /* window.setTimeout(function() { player.play(); }, 1000); */ }); // Переключение аидео на следующее по окончанию player.on('ended', event => { let nextyoutube = $('.change-youtube.active').next(".change-youtube"); let urlnextyoutube = nextyoutube.attr('data-youtube'); if (!urlnextyoutube) { player.stop(); } else { $('.change-youtube').removeClass('active'); nextyoutube.addClass('active'); player.source = { type: 'video', sources: [ { src: urlnextyoutube, provider: 'youtube' } ] }; // если нужно запускать следующее видео, раскоментируйте строчки ниже /* window.setTimeout(function() { player.play(); }, 1000); */ } }); }); |
Плейлист для Vimeo я делать не стал, т.к. он не так популярен и делается аналогично плейлисту с YouTube, только с другим провайдером и ID
Здраствуйте! Есть вопрос. По какой причине могут не воспроизводиться видео, нажимая на кнопки (плеер Youtube), просто ничего не происходит:(
У меня не воспроизводятся, потому что стоит возрастное ограничение (заменю позже видео).
А так не знаю... результат бы нужно увидеть...
У меня теперь они воспроизводяться, но не все, не части просто пишет 'Видео недоступно'...
Скорее всего ошибка в ID видео (30BQjlXXamY)
Я уже много раз перепроверил ошибок вроде нет..
Тогда нужна ссылка на результат, погляжу почему не работает
Могу тогда, скинуть вам на почту архив с страницой? (просто я новичок в этом, и там довольно много написано кривовато, но меня только проблема с плеером интересует)
Скидывайте, почта в контактах есть.
Скинул вам на почту!!
В плей-листе YouTube куча ошибок в консоли. Как исправить?
Каких именно?
А как добавить pdf файл? например в плейлисте в первой кнопке видео, а во второй чтобы пдф файл открылся?
А причем тут pdf и видео?
Плейлист HTML5 видео не запускается. Видны только картинки, а самого окна с видео нет. Что не так?
У меня почему-то не воспроизводится видео, когда использую плеер...
Ну тут пример нужен, так не угодаешь 🙂
А в плейлисте видео как размещается?В прокрутке или квадратами?
Просто квадраты