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

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

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

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

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

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

Get A Move On

Boots Boots Boots

Greek Dance

Vanishing Horizon

<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>

<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 указывает прямой путь к файлу.

.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
}

.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

}

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(); 	
		}
	});	
});

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 и постер.

<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>

<span>Outback</span>

</div>

<span>Working Man</span>

</div>

<span>Platform</span>

</div>

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

.video-container {
	margin: 20px;
}
.video-container .plyr--video {
	aspect-ratio: 16 / 9;
}
.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;
}

.video-container {

margin: 20px;

}

.video-container .plyr--video {

aspect-ratio: 16 / 9;

}

.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;

}

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(); // если нужно сразу запускать следующее видео, раскомментируйте эту строчку 
		}
	});	
});

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, а в самом плеере.

Кот устал

Кот прыгает

Манул

<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>

<span>Кот устал</span>

</div>

<span>Кот прыгает</span>

</div>

<span>Манулr</span>

</div>

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

.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;
}

.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;

}

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);
			*/
		}
	});	
});

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

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 14.05.2020 / Обновлено: 15.08.2024
Рубрики: Фото, аудио и видео
Метки: jQuery, Авторское, Аудио, Видео
11300 просмотров

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

Рамки для фонового видео

Адаптивные рамки для встроенного фонового видео HTML5

Всплывающие фото-подсказки

Фотография, двигающаяся за курсором, пока он находится на заданном слове

Вертикальный аккордеон для фотографий

Вертикальный аккордеон с раскрывающимися по клику фотографиями

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

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

Roudeep: 06.11.2024 в 16:58

Здравствуйте! Столкнулся с проблемой в работе аудиоплеера HTML5 аудио на сайте. Первый трек проигрывается без проблем, но после его окончания автоматический переход к следующему треку не происходит. Также при ручном переключении на другие треки воспроизведение не начинается. Не могли бы вы помочь разобраться, что может быть причиной этой проблемы и как её можно решить?

Спасибо!

Ответить
- Alexander: 07.11.2024 в 09:27
  
  Посмотрите, в консоле какие ошибки указаны.
  А так первое что на ум приходит - не правильные пути, в атрибуте data-audio полный путь к файлу указан?
  
  Ответить
Олег Витальевич: 13.02.2024 в 22:07

Рас комментирование строки не помогает

Ответить
Олег Витальевич: 13.02.2024 в 22:06

В любом случае пока не нажму на вкладку видео нельзя воспроизвести, подскажите пожалуйста как это убрать. Тот который не для ютуба, а для файлов с сервера.

Ответить
- Alexander: 14.02.2024 в 17:22
  poster: 'Outback.jpg', // Путь к постеру по умолчанию
  
  и
  
  src: 'Outback.mp4', // Путь к видео по умолчанию
  
  Можно взять из атрибута, которые вписать в
  
  <video id="player"></video>
  
  Например
  
  src: $('#player').attr('data-video'),
  
  и добавить его, как и в листе
  
  <video id="player" data-video="file.mp4"></video>
  Ответить
  - Олег Витальевич: 14.02.2024 в 21:33
    
    Спасибо помогло. Ох уж я намучился если честно с шортсами этими скачанными конечно...)Сайт и админ топчик!
    
    Ответить
Олег Витальевич: 05.02.2024 в 11:47

Здравствуйте. У вас при открытии страницы на видео стоит первый слайд с девушкой например, без дополнительных кликов. Как настроить чтобы было также, у меня пока не выбрано видео черный экран с кнопкой проигрывания.

Ответить
- Alexander: 07.02.2024 в 06:47
  
  Проверьте путь к первому постеру.
  Была опечатка с подсказкой в коде - Путь к постеру по умолчанию написано два раза, хотя во втором случае это путь к видео.
  
  Ответить
  - Олег Витальевич: 13.02.2024 в 20:39
    
    Спасиб за ответ. Получается скрипт нужно внутри страницы, а не отдельным файлом подключать? В том плане, что на разных страницах разные видео и путь к постеру соответственно разный
    
    Ответить
  - Олег Витальевич: 13.02.2024 в 20:43
    
    Либо как вариант в папку кидать Outback.jpg в каждую свою
    
    Ответить
    - Alexander: 14.02.2024 в 17:12
      
      Проще наверное скрипт немного переделать, чтобы брать первый трек и постер из атрибута.
      
      Ответить
Анатолий: 11.05.2022 в 00:12

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

Ответить
- Alexander: 13.05.2022 в 08:12
  
  У меня не воспроизводятся, потому что стоит возрастное ограничение (заменю позже видео).
  А так не знаю... результат бы нужно увидеть...
  
  Ответить
  - Анатолий: 18.05.2022 в 13:16
    
    У меня теперь они воспроизводяться, но не все, не части просто пишет 'Видео недоступно'...
    
    Ответить
    - Alexander: 19.05.2022 в 10:52
      
      Скорее всего ошибка в ID видео (30BQjlXXamY)
      
      Ответить
      - Анатолий: 19.05.2022 в 17:44
        
        Я уже много раз перепроверил ошибок вроде нет..
        
        Ответить
        
        Alexander: 19.05.2022 в 18:29
        
        Тогда нужна ссылка на результат, погляжу почему не работает
        
        Ответить
        
        Анатолий: 19.05.2022 в 18:47
        
        Могу тогда, скинуть вам на почту архив с страницой? (просто я новичок в этом, и там довольно много написано кривовато, но меня только проблема с плеером интересует)
        
        Alexander: 20.05.2022 в 09:18
        
        Скидывайте, почта в контактах есть.
        
        Анатолий: 22.05.2022 в 15:10
        
        Скинул вам на почту!!
Вячеслав: 07.03.2022 в 15:55

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

Ответить
- Alexander: 09.03.2022 в 08:22
  
  Каких именно?
  
  Ответить
Беркин: 09.02.2022 в 14:35

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

Ответить
- Alexander: 10.02.2022 в 05:43
  
  А причем тут pdf и видео?
  
  Ответить
Константин: 19.12.2020 в 22:10

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

Ответить
Андрей: 16.11.2020 в 10:30

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

Ответить
- Alexander: 16.11.2020 в 17:31
  
  Ну тут пример нужен, так не угодаешь 🙂
  
  Ответить
Андрей: 29.10.2020 в 14:10

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

Ответить
- Alexander: 29.10.2020 в 14:23
  
  Просто квадраты
  
  Ответить

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

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

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

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

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

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