Added quality settings

This commit is contained in:
Kasper Rynning-Tønnesen
2015-01-31 14:29:32 +01:00
parent 398f0393fe
commit 4bee67d2aa
2 changed files with 23 additions and 16 deletions

View File

@@ -12,8 +12,8 @@ function initYoutubeControls(player)
firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
} }
//elems = Array("volume", "duration", "fullscreen", "q"); elems = Array("volume", "duration", "fullscreen", "q");
elems = Array("volume", "duration", "fullscreen"); //elems = Array("volume", "duration", "fullscreen");
var container = document.getElementById("controls"); var container = document.getElementById("controls");
var newElem = document.createElement("div"); var newElem = document.createElement("div");
newElem.id = "playpause"; newElem.id = "playpause";
@@ -25,7 +25,8 @@ function initYoutubeControls(player)
newElemFor.id = elems[x]; newElemFor.id = elems[x];
container.appendChild(newElemFor); container.appendChild(newElemFor);
} }
/*elems = Array("medium", "large", "hd1080", "auto"); elems = Array("medium", "large", "hd1080", "auto");
elemName = Array("Low", "Medium", "High", "Auto");
newElem = document.createElement("div"); newElem = document.createElement("div");
newElem.id = "qS"; newElem.id = "qS";
newElem.className = "hide"; newElem.className = "hide";
@@ -35,10 +36,11 @@ function initYoutubeControls(player)
var newChild = document.createElement("div"); var newChild = document.createElement("div");
newChild.className = "qChange"; newChild.className = "qChange";
newChild.name = elems[x]; newChild.name = elems[x];
newChild.innerHTML = elems[x]; newChild.setAttribute("onclick", "changeQuality('"+elems[x]+"');");
newChild.innerHTML = elemName[x];
newElem.appendChild(newChild); newElem.appendChild(newChild);
} }
container.appendChild(newElem);*/ container.appendChild(newElem);
initControls(); initControls();
fitToScreen(); fitToScreen();
$(window).resize(function(){ $(window).resize(function(){
@@ -49,7 +51,7 @@ function initYoutubeControls(player)
function initControls() function initControls()
{ {
document.getElementById("playpause").addEventListener("click", playPause); document.getElementById("playpause").addEventListener("click", playPause);
//document.getElementById("q").addEventListener("click", settings); document.getElementById("q").addEventListener("click", settings);
document.getElementById("fullscreen").addEventListener("click", function() document.getElementById("fullscreen").addEventListener("click", function()
{ {
document.getElementById("player").webkitRequestFullscreen(); document.getElementById("player").webkitRequestFullscreen();
@@ -70,6 +72,9 @@ function fitToScreen()
document.getElementById("controls").style.left = $("#player").position()["left"] + "px"; document.getElementById("controls").style.left = $("#player").position()["left"] + "px";
//document.getElementById("controls").style.left = "10px"; //document.getElementById("controls").style.left = "10px";
$("#controls").width($("#player").width()); $("#controls").width($("#player").width());
document.getElementById("qS").style.top = "-80px";
document.getElementById("qS").style.left = $("#controls").width()-125+"px";
} }
function initSlider() function initSlider()
@@ -91,13 +96,17 @@ function settings()
$("#qS").toggleClass("hide"); $("#qS").toggleClass("hide");
} }
function changeQuality() function changeQuality(wantedQ)
{ {
wantedQ = this.getAttribute("name"); //wantedQ = this.getAttribute("name");
//console.log("Change quality");
//console.log(wantedQ);
if(ytplayer.getPlaybackQuality != wantedQ) if(ytplayer.getPlaybackQuality != wantedQ)
{ {
ytplayer.setPlaybackQuality(wantedQ); ytplayer.setPlaybackQuality(wantedQ);
ytplayer.getPlaybackQuality();
} }
$("#qS").toggleClass("hide");
} }
function setVolume(vol) function setVolume(vol)

View File

@@ -36,19 +36,17 @@
#qS #qS
{ {
display: block; display: block;
background-color: white; float:right;
position: relative; background-color: rgba(255,255,255,0.3);
float: right; position: absolute;
left: 55px;
/* margin-left: -10px; */
/* margin-top: -10px; */
top: -280%;
width:125px; width:125px;
} }
.qChange .qChange
{ {
font-family:helvetica; font-family:helvetica;
font-size:15px;
padding-left:5px; padding-left:5px;
padding-right:5px; padding-right:5px;
padding-bottom:3px; padding-bottom:3px;
@@ -58,7 +56,7 @@
.qChange:hover .qChange:hover
{ {
background-color:#ED207F; background-color:black;
} }
#fullscreen #fullscreen