auto-push

css/player.css

 * { margin:0; padding:0; }
 
+
 div#player {
+	 -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 	background-color: #333;
 	height: 30px;
 	position: absolute;
 	color: white;
 	padding-left: 20px;
 	line-height: 30px;
-	letter-spacing: 10px;
+	letter-spacing: 5px;
+	cursor: default;
+	box-sizing: border-box;
+}
+
+div#player div#player-control {
+	float: left;
+	margin-right: 5px;
+}
+
+div#player a#player-menu,
+div#player div#player-volume {
+	float: right;
+	margin-left: 10px; 
+}
+
+div#player div {
+	display: inline-block;
+	vertical-align: top;
+}
+
+div#player div#player-bar {
+	position: relative;
+	height: 5px;
+	width: 500px;
+	margin-top: 12px;
+	border: 1px solid #AAA;
+	cursor: pointer;
+}
+
+div#player div#player-cursor {
+	position: absolute;
+	height: 15px;
+	width: 2px;
+	top: 2px;
+	transform: translate(0px, -50%);
+	transition: left 1s;
+	background-color: #FFF;
+}
+
+div#player div#player-played {
+	position: absolute;
+	height: 5px;
+	top: 0px;
+	left: 0px;
+	transition: width 1s;
+	background-color: #DDD;
+}
+
+div#player div#player-buffer {
+	position: absolute;
+	height: 5px;
+	top: 0px;
+	left: 0px;
+	transition: width 1s;
+	background-color: #888;
+}
+
+div#player span#player-title {
+	max-width: 300px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	word-wrap: break-word;
+	white-space: nowrap;
+}
+
+span#player-duration,
+span#player-currentTime {
+	font-size: 0.8em;
+}
+
+div#player #player-volume-bar {
+	position: relative;
+	height: 5px;
+	width: 100px;
+	margin-top: 12px;
+	border: 1px solid #AAA;
+	cursor: pointer;
+}
+
+div#player div#player-volume-set {
+	position: absolute;
+	height: 5px;
+	width: 100%;
+	top: 0px;
+	left: 0px;
+	background-color: #DDD;
 }
 
 div#player a:hover {
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
+}
+
+input[type=range] {
+  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+  width: 100%; /* Specific width is required for Firefox. */
+  height: 10px;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+}
+
+input[type=range]:focus {
+  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
+}
+
+input[type=range]::-ms-track {
+  width: 100%;
+  cursor: pointer;
+  background: transparent; /* Hides the slider so custom styles can be added */
+  border-color: transparent;
+  color: transparent;
+}
+
+/* Special styling for WebKit/Blink */
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: 1px solid #fff;
+  height: 10px;
+  width: 2px;
+  background: #ffffff;
+  cursor: pointer;
+  margin-top: -2px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
+}
+
+/* All the same stuff for Firefox */
+input[type=range]::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 10px;
+  width: 2px;
+  background: #ffffff;
+  cursor: pointer;
+}
+
+/* All the same stuff for IE */
+input[type=range]::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #fff;
+  height: 10px;
+  width: 2px;
+  background: #fff;
+  cursor: pointer;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #fff;
+  border: 0.2px solid #010101;
+}
+
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #fff;
+  border: 0.2px solid #010101;
+}
+
+input[type=range]::-ms-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type=range]::-ms-fill-lower {
+  background: #2a6495;
+  border: 0.2px solid #010101;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+
+input[type=range]::-ms-fill-upper {
+  background: #3071a9;
+  border: 0.2px solid #010101;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 }

index.html

 <head>
 	<meta charset="utf-8">
 	<title></title>
+	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
 	<script type="text/javascript" src="js/player.js"></script>
 	<link rel="stylesheet" type="text/css" href="css/player.css">
 </head>
 <body>
 	<div id="player">
-		<a id="player-previous">«</a>
-		<a id="player-toggle">⧐</a>
-		<a id="player-next">»</a>
+		<div id="player-control">
+			<a id="player-previous">«</a>
+			<a id="player-toggle">▻</a>
+			<a id="player-next">»</a>
+		</div>
+		<span id="player-title">No Song</span>
+		<div id="player-bar">
+			<div id="player-buffer"></div>
+			<div id="player-played"></div>
+			<div id="player-cursor"></div>
+		</div>
+		<div id="player-time">
+			<span id="player-currentTime">00:00</span> | <span id="player-duration">00:00</span>
+		</div>
+		<a id="player-menu">☰</a>
+		<div id="player-volume">
+			<a id="player-volume-mute">♫</a>
+			<input type="range" id="player-volume-bar" min="0" max="100" value="100"/>
+			<!-- <div id="player-volume-bar">
+				<div id="player-volume-set"></div>
+			</div> -->
+		</div>
 	</div>
 	<div id="YTplayer"></div>
 	<script type="text/javascript" src="js/init.js"></script>

js/init.js

 evaplayer = new Player([
 {
 	title: "Musique 1",
-	link:"519_pOvP9xs"
+	link: "https://www.youtube.com/watch?v=519_pOvP9xs"
 },
 {
 	title: "Musique 2",
-	link: "519_pOvP9xs"
+	link: "https://www.youtube.com/watch?v=etmSWkeRYbk"
 }
 ]);
-console.log(evaplayer);
-
+console.log(evaplayer);

js/player.js

 function Player(sources) {
 	this.playlist = sources;
 	this.current = {};
+	this.volume = 100;
+	this.currentSong = -1;
 	this.isPlaying = false;
-	this.player;
+	this.isMute = false;
+	this.rate = 500;
 	this.YTplayer = false;
+	this.controls = {};
+	this.interval = null;
 
 	this.init = function() {
 		this.loadYTplayer();
+		this.bindControls();
 		this.bindEvents();
-		console.log('init...');
 	}
 
 	this.bindEvents = function() {
-		var toggle = document.getElementById('player-toggle');
-		toggle.addEventListener('click', this.toggle);
-		var previous = document.getElementById('player-previous');
-		previous.addEventListener('click', this.previous);
-		var next = document.getElementById('player-next');
-		next.addEventListener('click', this.next);
+		this.controls.toggle.addEventListener('click', this.toggle);
+		this.controls.previous.addEventListener('click', this.previous);
+		this.controls.next.addEventListener('click', this.next);
+		this.controls.bar.addEventListener('click', this.seekPosition);
+		this.controls.volume.addEventListener('input', this.setVolume);
+		this.controls.volumeMute.addEventListener('click', this.setMute);
 	}
 
-	this.newSong = function (videoId) {
-		if (this.YTplayer)
-			this.YTplayer.parentNode.removeChild(this.YTplayer);
-		this.YTplayer = new YT.Player('YTplayer', {
-			height: '0',
-			width: '0',
-			videoId: videoId,
-			playerVars: {
-
-			},
-			events: {
-				'onReady': onPlayerReady,
-				'onStateChange': onPlayerStateChange
-			}
-		});
+	this.bindControls = function() {
+		this.controls.toggle = document.getElementById('player-toggle');
+		this.controls.next = document.getElementById('player-next');
+		this.controls.previous = document.getElementById('player-previous');
+		this.controls.volume = document.getElementById('player-volume-bar');
+		this.controls.volumeSet = document.getElementById('player-volume-set');
+		this.controls.volumeMute = document.getElementById('player-volume-mute');
+		this.controls.bar = document.getElementById('player-bar');
+		this.controls.buffer = document.getElementById('player-buffer');
+		this.controls.played = document.getElementById('player-played');
+		this.controls.cursor = document.getElementById('player-cursor');
+		this.controls.duration = document.getElementById('player-duration');
+		this.controls.currentTime = document.getElementById('player-currentTime');
+		this.controls.title = document.getElementById('player-title');
+	}
+
+	this.getVideoID = function(url) {
+		re = /\?v=([^&]*)/;
+		match = re.exec(url);
+		return (match && match.length >= 2 ? match[1] : '');
+	}
+
+	this.newSong = function (url) {
+		if (!this.YTplayer) {
+			this.YTplayer = new YT.Player('YTplayer', {
+				height: '0',
+				width: '0',
+				videoId: this.getVideoID(url),
+				events: {
+					'onReady': onPlayerReady,
+					'onStateChange': onPlayerStateChange
+				}
+			});
+		} else {
+			this.YTplayer.loadVideoById(this.getVideoID(url));
+		}
+		this.isPlaying = true;
 	}
 
 	this.loadYTplayer = function() {
 		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 	};
 
-	this.seekPosition = function() {};
+	this.getState = function() {
+		var current = this.YTplayer.getCurrentTime();
+		var bufferized = this.YTplayer.getVideoLoadedFraction() * 100;
+		var duration = this.current.duration;
+		var fraction = (current / duration) * 100;
+		this.controls.played.style.width = fraction + '%';
+		this.controls.buffer.style.width = bufferized + '%';
+		this.controls.cursor.style.left = fraction + '%';
+		current = new Date(current * 1000);
+		current = current.toTimeString().substr(3, 6);
+		this.controls.currentTime.textContent = current;
+	}
+
+	this.seekPosition = function() {
+		var duration = evaplayer.current.duration;
+		var fraction = (event.offsetX / evaplayer.controls.bar.clientWidth) * 100;
+		var timeseeked = (duration * fraction) / 100;
+		evaplayer.YTplayer.seekTo(timeseeked);
+	};
+
+	this.setVolume = function() {
+		evaplayer.YTplayer.setVolume(event.target.value);
+		evaplayer.volume = event.target.value;
+	};
+
+	this.setMute = function() {
+		if (!evaplayer.isMute) {
+			evaplayer.YTplayer.mute();
+			evaplayer.controls.volume.value = 0;
+			evaplayer.controls.volumeMute.style.textDecoration = 'line-through';
+		} else {
+			evaplayer.YTplayer.unMute();
+			evaplayer.controls.volume.value = evaplayer.volume;
+			evaplayer.controls.volumeMute.style.textDecoration = 'none';
+		}
+		evaplayer.isMute = !evaplayer.isMute;
+	};
+
 	this.toggle = function() {
-		if (evaplayer.isPlaying) {
+		if (evaplayer.isPlaying)
 			evaplayer.YTplayer.pauseVideo();
-		} else {
+		else
 			evaplayer.YTplayer.playVideo();
-		}
 		evaplayer.isPlaying = !evaplayer.isPlaying;
 		return evaplayer;
 	};
+
 	this.next = function() {
-		return 
+		evaplayer.currentSong++;
+		if (evaplayer.currentSong > evaplayer.playlist.length - 1)
+			evaplayer.currentSong = 0;
+		evaplayer.newSong(evaplayer.playlist[evaplayer.currentSong].link);
 	};
-	this.previous = function() {};
-	this.init();
-};
 
-function onYouTubeIframeAPIReady() {
-	evaplayer.newSong('519_pOvP9xs');
-}
+	this.previous = function() {
+		evaplayer.currentSong--;
+		if (evaplayer.currentSong < 0)
+			evaplayer.currentSong = evaplayer.playlist.length - 1;
+		evaplayer.newSong(evaplayer.playlist[evaplayer.currentSong].link);
+	};
+
+	this.updateInfo = function() {
+		var data = this.YTplayer.getVideoData();
+		var duration = this.YTplayer.getDuration();
+		this.current = {
+			author: data.author,
+			title: data.title,
+			duration: duration
+		};
+		var title = this.current.title;
+		if (this.current.author)
+			title = this.current.author + ' - ' + title;
+		this.controls.title.textContent = title;
+		var duration = this.current.duration;
+		duration = new Date(duration * 1000);
+		duration = duration.toTimeString().substr(3, 6);
+		this.controls.duration.textContent = duration;
+	};
 
-function onPlayerReady(event) {
-	event.target.playVideo();
-}
+	function onPlayerReady(event) {
+		event.target.playVideo();
+		if (!evaplayer.interval)
+			evaplayer.interval = setInterval(function() {
+				evaplayer.getState();
+			}, evaplayer.rate);
+	}
 
-function onPlayerStateChange(event) {
-	if (event.data == YT.PlayerState.PLAYING && !evaplayer.isPlaying) {
-		evaplayer.isPlaying = true;
+	function onPlayerStateChange(event) {
+		switch (event.data) {
+			case YT.PlayerState.PLAYING: 
+				evaplayer.isPlaying = true;
+				evaplayer.updateInfo();
+				evaplayer.controls.toggle.textContent = '◻';
+				if (!evaplayer.interval)
+					evaplayer.interval = setInterval(function() {
+						evaplayer.getState();
+					}, evaplayer.rate);
+				break;
+			case YT.PlayerState.ENDED:
+				evaplayer.next();
+				break;
+			case YT.PlayerState.PAUSED:
+				evaplayer.isPlaying = false;
+				evaplayer.controls.toggle.textContent = '▻';
+				clearInterval(evaplayer.interval);
+				evaplayer.interval = null;
+				break;
+		}
 	}
+
+	this.init();
+};
+
+function onYouTubeIframeAPIReady() {
+	evaplayer.next();
 }