Adding controlls

js/playercontrols.js

@@ -0,0 +1,166 @@
+function initYoutubeControls(player)
+{
+	if(player != undefined)
+	{
+		ytplayer = player;
+		initSlider();
+		durationFixer = setInterval(durationSetter, 1000);
+	}else
+	{	
+		tag = document.createElement('script');
+		tag.src = "https://www.youtube.com/iframe_api";
+		firstScriptTag = document.getElementsByTagName('script')[0];
+		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+	}
+	//elems = Array("volume", "duration", "fullscreen", "q");
+	elems = Array("volume", "duration", "fullscreen");
+	var container = document.getElementById("controls");
+	var newElem = document.createElement("div");
+	newElem.id = "playpause";
+	newElem.className = "play";
+	container.appendChild(newElem);
+	for(x = 0; x < elems.length; x++)
+	{
+		var newElem = document.createElement("div");
+		newElem.id = elems[x];
+		container.appendChild(newElem);
+	}
+	/*elems = Array("medium", "large", "hd1080", "auto");
+	newElem = document.createElement("div");
+	newElem.id = "qS";
+	newElem.className = "hide";
+
+	for(x = 0; x < elems.length; x++)
+	{
+		var newChild = document.createElement("div");
+		newChild.className = "qChange";
+		newChild.name = elems[x];
+		newChild.innerHTML = elems[x];
+		newElem.appendChild(newChild);
+	}
+	container.appendChild(newElem);*/
+	initControls()
+	fitToScreen();
+	$(window).resize(function(){
+		fitToScreen();
+	});
+}
+
+function initControls()
+{
+	document.getElementById("playpause").addEventListener("click", playPause);
+	//document.getElementById("q").addEventListener("click", settings);
+	document.getElementById("fullscreen").addEventListener("click", function()
+	{
+		document.getElementById("player").webkitRequestFullscreen();
+	});
+	//document.getElementById("controls").style.width= $(window).width()*0.6+"px";
+	var classname = document.getElementsByClassName("qChange");
+	/*for(var i=0; i< classname.length;i++)
+	{
+		classname[i].addEventListener("click", changeQuality);
+	}*/
+}
+
+function fitToScreen()
+{
+	document.getElementById("controls").style.top = document.getElementById("player").offsetTop + $("#player").height() -30 + "px";
+	document.getElementById("controls").style.left = document.getElementById("player").offsetLeft + "px";
+}
+
+function initSlider()
+{
+	$("#volume").slider({
+	    min: 0,
+	    max: 100,
+	    value: ytplayer.getVolume(),
+		range: "min",
+		animate: true,
+	    slide: function(event, ui) {
+	      setVolume(ui.value);
+	    }
+	});
+}
+
+function settings()
+{
+	$("#qS").toggleClass("hide");
+}
+
+function changeQuality()
+{
+	wantedQ = this.getAttribute("name");
+	if(ytplayer.getPlaybackQuality != wantedQ)
+	{
+		ytplayer.setPlaybackQuality(wantedQ);
+	}
+}
+
+function setVolume(vol)
+{
+	ytplayer.setVolume(vol);
+	console.log(vol);
+	if(vol == 0){
+		console.log("no volume");
+	}else if(vol < 33){
+		console.log("low-volume");
+	}else if(vol > 33 && vol < 66){
+		console.log("medium-volume");
+	}else if(vol > 66){
+		console.log("full-volume");
+	}
+}
+
+function playPause()
+{
+	console.log("playPause");
+	state = ytplayer.getPlayerState();
+	console.log("state: "+state);
+	button = document.getElementById("playpause");
+	if(state == 1)
+	{
+		ytplayer.pauseVideo();
+		//button.innerHTML = "Resume";
+	}else if(state == 2)
+	{
+		ytplayer.playVideo();
+		//button.innerHTML = "Pause";
+	}
+}
+
+function durationSetter()
+{
+	duration = ytplayer.getDuration();
+	dMinutes = Math.floor(duration / 60);
+	dSeconds = duration - dMinutes * 60;
+	currDurr = ytplayer.getCurrentTime();
+	minutes = Math.floor(currDurr / 60);
+	seconds = currDurr - minutes * 60;
+	document.getElementById("duration").innerHTML = pad(minutes)+":"+pad(seconds)+" <span id='dash'>/</span> "+pad(dMinutes)+":"+pad(dSeconds);
+}
+
+function pad(n)
+{
+	return n < 10 ? "0"+Math.floor(n) : Math.floor(n);
+}
+
+function volumeOptions()
+{
+	console.log("volumeOptions");
+	button = document.getElementById("volume");
+	if(ytplayer.isMuted())
+	{
+		ytplayer.unMute();
+		button.innerHTML = "Mute";
+	}
+	else
+	{
+		ytplayer.mute();
+		button.innerHTML = "Unmute";
+	}
+}
+
+function logQ()
+{
+	console.log(ytplayer.getPlaybackQuality());
+}

js/youtube.js

@@ -96,11 +96,12 @@ function onYouTubeIframeAPIReady() {
 		height: window.height*0.75,
 		width: window.width*0.6,
 		videoId: response,
-		playerVars: { controls: "1" , iv_load_policy: "3", theme:"light", rel:"0", color:"white" },
+		playerVars: { rel:"0", wmode:"transparent", controls: "0" , iv_load_policy: "3", theme:"light", rel:"0", color:"white"},
 		events: {
 			'onReady': onPlayerReady,
 			'onStateChange': onPlayerStateChange,
-			'onError': errorHandler
+			'onError': errorHandler,
+			'onPlaybackQualityChange': logQ
 		}
 	});
 }
@@ -142,6 +143,11 @@ function onPlayerStateChange(newState) {
 		wasPaused = true;
 		beginning = false;
 	}
+	if(newState.data == 1 || newState.data == 2)
+	{
+		$("#playpause").toggleClass("play");
+		$("#playpause").toggleClass("pause");
+	}
 }
 
 function checkEnd()
@@ -316,8 +322,11 @@ function onPlayerReady(event) {
 	  //ytplayer.addEventListener("onError", "errorHandler");
 		getTime();
 		ytplayer.playVideo();
+		initYoutubeControls(ytplayer)
 		getTitle();
 		setBGimage(response);
+		initSlider();
+		durationFixer = setInterval(durationSetter, 1000);
 	}
 
 function setBGimage(id){