В данной статье рассмотрим работу с API YouTube v.3, а именно инициализацию проигрывателя плейлиста и добавление кнопок для контроля воспроизведения.

Вот некоторые особенности данного примера:

• Плейлист формируется из фрагментов видео-роликов, то есть для каждого видео указаны время начала воспроизведения и его окончания;
• При управлении проигрывателем происходит изменение состояния кнопок управления, то есть если видео находится в статусе воспроизведения, то кнопка «Play» становится не активной и наоборот — когда воспроизведение приостановлено кнопка паузы так же становится не активной. Если проигрывается последнее видео в плейлисте — кнопка «Next» становится недоступной для нажатий.

Демонстрация:

Исходный код

Исходный код для блока с элементами воспроизведения (кнопки «Play», «Pause», «Next», «Previous»):

<div id="ytplayer"></div>
<div class="buttons">
	<div class="button" id="play-button"><img src="/wp-content/uploads/2019/11/play.png"/></div>
	<div class="button" id="pause-button"><img src="/wp-content/uploads/2019/11/pause.png"/></div>
	<div class="button" id="previous-button"><img src="/wp-content/uploads/2019/11/prev.png"/></div>
	<div class="button" id="next-button"><img src="/wp-content/uploads/2019/11/next.png"/></div>
</div>

JavaScript с функциями плеера с комментариями:

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var i = 0;
	
// Далее 3 массива: videoId_arr - массив с ID'шниками видео с YouTube. 
// Каждому элементу этого массива соответствуют элементы массивов startSeconds_arr и endSeconds_arr
// в которых содержатся секунды начала и конца каждого ролика. 
// В данном примере используется один и тот же ID.
var videoId_arr = ["Oz6AB_tWvaA", "Oz6AB_tWvaA", "Oz6AB_tWvaA", "Oz6AB_tWvaA"];
var startSeconds_arr = ["6", "24", "33", "40"];
var endSeconds_arr = ["16", "29", "37", "54"];

var player;

// Подробнее о параметрах конфигурации плеера можно
// узнать в документации https://developers.google.com/youtube/player_parameters#Parameters
var playerConfig = {
	height: '360',
	width: '640',
	videoId: videoId_arr[i],
	playerVars: {
	autoplay: 1,
	controls: 0,
	modestbranding: 0,
	fs: 1,
	cc_load_policy: 0,
	iv_load_policy: 3,
	start: startSeconds_arr[i],
	end: endSeconds_arr[i],
	autohide: 0,
},
	events: {
		'onStateChange': onStateChange,
		'onReady': onPlayerReady
	}
};

function onYouTubePlayerAPIReady() {
	player = new YT.Player('ytplayer', playerConfig);
}

function onPlayerReady(event) {
	 
	// Далее код отвечающий за функционированиие
	// кнопок управления воспроизведением 
	// Кнопка "Play" (Начать воспроизведение)
	var playButton = document.getElementById("play-button");
	playButton.addEventListener("click", function() {
		player.playVideo();
	});
	  
	// Кнопка "Pause" (Приостановить воспроизведение)
	var pauseButton = document.getElementById("pause-button");
	pauseButton.addEventListener("click", function() {
		player.pauseVideo();
	});
	
	// Кнопка "Next" (Следующий фрагмент)  
	var nextButton = document.getElementById("next-button");
	nextButton.addEventListener("click", function() {
		player.seekTo(endSeconds_arr[i], true);
	});

	// Кнопка "Previous" (Предыдущий фрагмент)
	var previousButton = document.getElementById("previous-button");
	previousButton.addEventListener("click", function() {
		i = i-1;
		player.loadVideoById({
			videoId: videoId_arr[i],
			startSeconds: startSeconds_arr[i],
			endSeconds: endSeconds_arr[i]
			});
	});

}

// Функция которая срабатывает при изменении статуса проигрывания
function onStateChange(state) {

	var _video_url = state.target.getVideoUrl();
	var _video_id = _video_url.split('v=')[1];
	var _current_index = videoId_arr.indexOf(_video_id) +1; 
	var _end_play_time = player.getCurrentTime();
		
	if (state.data === YT.PlayerState.ENDED && _end_play_time >= endSeconds_arr[i]) {
		console.log('State: ', _video_id, _current_index, 
		player.getCurrentTime(),  
		startSeconds_arr[i], 
		endSeconds_arr[i], 
		(endSeconds_arr[i] - startSeconds_arr[i]), state );

		i++;
		if (typeof videoId_arr[i] === 'undefined'){
			i = 0;
			return;
		}
			
		player.loadVideoById({
			videoId: videoId_arr[i],
			startSeconds: startSeconds_arr[i],
			endSeconds: endSeconds_arr[i]
		});
		
	} else {
		console.log('State: ', _video_id, _current_index, state );
	}
	
	// Далее код изменяющий состояние кнопок
	// например делает неактивной кнопку "Play"
	// если видео уже воспроизводится  
	if (state.data === YT.PlayerState.PLAYING) {
		jQuery('#play-button').css('opacity', '0.4');
		jQuery('#pause-button').css('opacity', '1.0');
	} else {
		jQuery('#play-button').css('opacity', '1.0');
		jQuery('#pause-button').css('opacity', '0.4');
	}
			
	if (i === 0) {
		jQuery('#previous-button').css('opacity', '0.4');
		jQuery('#previous-button').css('pointer-events', 'none');
	} else {
		jQuery('#previous-button').css('opacity', '1.0');
		jQuery('#previous-button').css('pointer-events', 'auto');
	}
			 
	if (typeof videoId_arr[i+1] === 'undefined' || i === 0 && state.data != YT.PlayerState.PLAYING) {
		jQuery('#next-button').css('opacity', '0.4');
		jQuery('#next-button').css('pointer-events', 'none');
	} else {
		jQuery('#next-button').css('opacity', '1.0');
		jQuery('#next-button').css('pointer-events', 'auto');
	}

}
</script>

Совсем чуть-чуть стилизуем блок с элементами:

<style>
	.buttons {
		display: flex;
		justify-content: center;
	}
</style>