Показать сообщение отдельно
  #5 (permalink)  
Старый 08.12.2018, 16:40
Интересующийся
Отправить личное сообщение для bridun Посмотреть профиль Найти все сообщения от bridun
 
Регистрация: 03.12.2018
Сообщений: 17

Вот весь плеер, как к нему сделать ползунок звука здесь просто 0-100
<div class="panel">
<button id="back" onclick="player.previousVideo();">Back</button>
<button id="play" onclick="player.playVideo();">Play</button>
<button id="pause" onclick="player.pauseVideo();">Pause</button>
<button id="next" onclick="player.nextVideo();">Next</button>
<div id="time">00:00</div>		
<div id="line" onclick="progress (event);">
<div class="viewed"></div>
<div id="fader" onclick="alert('fader');"></div>
</div>
<button id="volume" onclick="editVolume ();">Громкость</button>
<div id="quality">Auto</div>
<button id="full" onclick="playFullscreen ();">FullScreen</button>
</div>		
<div>
<button id="playlist" onclick="loadPlaylistVideoIds();">Load New Playlist</button>
<button id="qual" onclick="editQuality ();">Сменить качество на 480</button>
</div>




//Инициализация плеера
function onYouTubeIframeAPIReady() {
	  player = new YT.Player('player', {
		height: '500',
		playerVars: { 'autoplay': 0, 'controls': 0, 'showinfo': 0, 'rel': 0},
		width: '850',
		videoId: 'CyVuYAHiZb8',
		events: {
		  'onReady': onPlayerReady
		}
  });
}

// Обработчик готовность
function onPlayerReady(event) {
	var player = event.target;
	iframe = document.getElementById('player');
	setupListener(); 			  
	updateTimerDisplay();
	updateProgressBar();
				
	time_update_interval = setInterval(function () {
		updateTimerDisplay();
		updateProgressBar();
	}, 1000);		  
}
/*Слушать события*/
function setupListener (){
	document.getElementById('full').addEventListener('click', playFullscreen);
}
/*Включение фуллскрина*/
function playFullscreen (){
	player.playVideo();//won't work on mobile
			  
	  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
	  if (requestFullScreen) {
		requestFullScreen.bind(iframe)();
	  }
}
/*Загрузить плейлист*/			
function loadPlaylistVideoIds(); {
	player.loadPlaylist({
		'playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'],
		'listType': 'playlist',
		'index': 0,
		'startSeconds': 0,
		'suggestedQuality': 'small'
			});
}			
/*Громкость*/
/*function editVolume () {				
	if (player.getVolume() == 0) {
		player.setVolume('100');
	}else {
		player.setVolume('0');
	}
};
	*/	
	
/*player.onwheel = function(e){
	var del = e.deltaY/100;
	this.setVolume( this.getVolume() + del > 100 ? 100 : this.getVolume() + del < 0 ? 0 : this.getVolume() + del );
};
*/

onwheel = function(e){
	var del = e.deltaY/100;
	player.setVolume( player.getVolume() + del > 100 ? 100 : player.getVolume() + del < 0 ? 0 : player.getVolume() + del );
};
			
/*Качество*/
function editQuality () {
	player.setPlaybackQuality('medium');			
	document.getElementById('quality').innerHTML = '480';
}
			
// Обновляем время на панельке - счетчик
function updateTimerDisplay(){
	document.getElementById('time').innerHTML = formatTime(player.getCurrentTime());
}
/*Формат времени*/
function formatTime(time){
	time = Math.round(time);
	var minutes = Math.floor(time / 60),
	seconds = time - minutes * 60;
	seconds = seconds < 10 ? '0' + seconds : seconds;
	return minutes + ":" + seconds;
}

// Обновляем прогресс
function updateProgressBar(){

	var line_width = jQuery('#line').width();
	var persent = (player.getCurrentTime() / player.getDuration());
	jQuery('.viewed').css('width', persent * line_width);
	per = persent * 100;
	jQuery('#fader').css('left', per+'%');
}

/*Линия прогресса*/
function progress (event) {
				
	var line_width = jQuery('#line').width();
	// положение элемента
	var pos = jQuery('#line').offset();
	var elem_left = pos.left;		
	// положение курсора внутри элемента
	var Xinner = event.pageX - elem_left;
	var newTime = player.getDuration() * (Xinner / line_width);
	// Skip video to new time.
	player.seekTo(newTime);
}
Ответить с цитированием