город: Тамбов
тел: +7 999 621 90 62
e-mail: moskwin68@mail.ru
( ! ) Deprecated: Функция get_the_author вызвана с аргументом, который <strong>считается устаревшим</strong> с версии 2.1.0. Альтернативы не предусмотрено. in /home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-includes/functions.php on line 5011 Call Stack #TimeMemoryFunctionLocation 10.0001408216{main}( ).../index.php:0 20.0002409832require( '/home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-blog-header.php' ).../index.php:17 30.357665464192require_once( '/home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-includes/template-loader.php' ).../wp-blog-header.php:19 40.362765598784include( '/home/h117935/data/www/xn--90abjbolhs9b.xn--p1ai/wp-content/themes/sandbox/single.php' ).../template-loader.php:106 50.381966623096sandbox_post_class( ).../single.php:12 60.381966623528get_the_author( ).../functions.php:298 70.381966623528_deprecated_argument( ).../author-template.php:27 80.381966623848trigger_error ( ).../functions.php:5011 hentry p1 post publish author-%d0%b5%d0%b2%d0%b3%d0%b5%d0%bd%d0%b8%d0%b9-%d0%bc%d0%be%d1%81%d0%ba%d0%b2%d0%b8%d0%bd category-blog tag-javascript tag-youtube-api y2019 m11 d10 h19">

YouTube API. Кнопки контроля воспроизведения плейлиста

В данной статье рассмотрим работу с 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>