/*********************************************************************
* PlayList再生 Version 4.2.0
* (SWF不要)
* Copyright (C) 2012-2016 maverica corporation. All Rights Reserved.
*********************************************************************/
var YPlayList = function() {
this.paramList = {
'target': '' //表示先タグID
,'targetInner': '' //表示先インナーID(利用する場合のみ指定)
,'playListID': '' //プレイリストID
,'apiKey': '' //Youtube DATA API ブラウザキー(必須)
,'player': { //プレーヤー設定
'width': 160
,'height': 97
,'quality': 'default' //small:640x360未満/medium:640x360以上/large:854x480以上/hd720:1280x720以上/default:YouTube が適切な再生画質を選択
,'fs': 1 //全画面表示ボタン 0:非表示/1:表示
}
,'delListItemStrList': new Array() //プレイリストのタイトル文字列から削除する文字列
,'addListItemFirst': '' //プレイリストのタイトル先頭に付加する文字列
,'addListItemLast': '' //プレイリストのタイトル末尾に付加する文字列
,'isAutoPlay': false //対応ブラウザでは自動再生(iOSでは無効)
,'startVolume': 100 //初期音量(0-100)
,'isUseControl': false //コントロールの利用
,'autoHide': 0 //コントロールの自動非表示(2:プログレスバーのみ非表示、1:自動非表示、0:常に表示)
,'thumbnailType': 0 //サムネイル(0:無し/1:default/2:medium/3:hight/4:standard/5:maxres)
,'titleTarget': '' //動画タイトル情報表示先ID
,'descriptionTarget': '' //動画説明情報表示先ID
,'controllerTarget': '' //コントローラー/リストエリア描画先(空白時は自動生成)
,'maxResults': 50 //プレイリストの動画アイテム数(max50)
,'itemChangeCallback': null //動画変更時コールバック(引数:アイテムインデックス)
};
this.player = null;
this.activeIndex = 0;
this.playList = new Array();
this.isRepeat = false;
this.controlList = new Array();
this.preVolume = 100;
};
YPlayList._ObjList = new Array();
YPlayList._playListFuncList = new Array();
YPlayList._isUseIframe = (function() {
if(typeof document.documentElement.style.maxHeight != "undefined") {
if(!/*@cc_on!@*/false) {
//IE以外
if(!!window.postMessage) {
return true;
} else {
return false;
}
} else if(document.documentMode && document.documentMode >=8) {
return true;
} else {
return false;
}
} else {
//IE6以下
return false;
}
}());
YPlayList._isApple = (function() {
var ua = navigator.userAgent;
if(ua.indexOf("iPhone") > -1
|| ua.indexOf("iPad") > -1) {
return true;
} else {
return false;
}
}());
YPlayList._isAndroid = (function() {
var ua = navigator.userAgent;
if(ua.indexOf("Android") > -1) {
return true;
} else {
return false;
}
}());
YPlayList.prototype = {
onPlayerReady:function(e) {
if(this.playList.length > 0) {
if(!YPlayList._isApple&&this.paramList["isAutoPlay"]) {
this.player.loadVideoById(this.playList[this.activeIndex].videoId, 0, this.paramList["player"]["quality"]);
} else {
this.player.cueVideoById(this.playList[this.activeIndex].videoId, 0, this.paramList["player"]["quality"]);
}
}
this.player.unMute();
this.player.setVolume(this.paramList["startVolume"]);
if(!YPlayList._isApple) {
this.controlList["controller"].style.display = "";
if(!YPlayList._isAndroid
|| this.player.cueVideoByFlashvars) {
this.controlList["mute"].parentNode.style.display = "";
this.controlList["volume"].parentNode.style.display = "";
this.controlList["repeat"].parentNode.style.display = "";
this.controlList["time"].parentNode.style.display = "";
var baseWidth = parseInt(this.controlList["volume"].clientWidth);
width = Math.round(this.paramList["startVolume"] * baseWidth / 100);
this.controlList["volume"].firstChild.style.width = width+"px";
}
}
}
,onPlayerStateChange:function(state) {
// document.getElementById("debug2").appendChild(document.createTextNode("["+state+"|Total:"+this.player.getDuration()+"/Now:"+this.player.getCurrentTime()+"|Total:"+this.player.getVideoBytesTotal()+"/Load:"+this.player.getVideoBytesLoaded()+"]"));
switch(state) {
case 0: //YT.PlayerState.ENDED:
if((this.player.getDuration() - 2) < this.player.getCurrentTime()
|| this.player.getVideoBytesTotal() <= this.player.getVideoBytesLoaded()) {
if(this.activeIndex+1 < this.playList.length) {
this.activeIndex++;
this.playList[this.activeIndex].onclick();
return;
} else if(this.isRepeat) {
this.activeIndex = 0;
this.playList[this.activeIndex].onclick();
return;
}
}
this.setPlayButton();
break;
case 1: //YT.PlayerState.PLAYING:
this.setPauseButton();
var myObj = this;
setTimeout(function() {
myObj.dispTime();
}, 100);
break;
case 2: //YT.PlayerState.PAUSED:
this.setPlayButton();
break;
case 5: //YT.PlayerState.CUED:
var myObj = this;
setTimeout(function() {
myObj.dispTime();
}, 10);
}
}
,setPlayButton:function() {
if(!YPlayList._isApple) {
var playButton = this.controlList["play"];
playButton.setAttribute("title", "Play");
playButton.setAttribute("class", "play");
playButton.innerHTML = 'Play';
this.controlList["time"].innerHTML = "";
}
}
,setPauseButton:function() {
if(!YPlayList._isApple) {
var playButton = this.controlList["play"];
playButton.setAttribute("title", "Pause");
playButton.setAttribute("class", "pause");
playButton.innerHTML = 'Pause';
}
}
,dispTime:function() {
if(!YPlayList._isApple) {
if(this.player
&& this.controlList["time"].parentNode.style.display == "") {
var totalTime = this.player.getDuration();
var nowTime = this.player.getCurrentTime();
if(this.player.getPlayerState() == 1/*YT.PlayerState.PLAYING*/) {
if(nowTime && totalTime > 0 && nowTime > 0) {
this.controlList["time"].innerHTML = this._getTimeStr(Math.floor(nowTime))+"/"+this._getTimeStr(Math.ceil(totalTime));
} else {
this.controlList["time"].innerHTML = "";
}
var ms = 10;
if(nowTime > 0) {
ms = (Math.ceil(nowTime) - nowTime) * 1000;
}
var myObj = this;
setTimeout(function() {
myObj.dispTime();
}, ms);
} else {
this.controlList["time"].innerHTML = "";
}
} else {
this.controlList["time"].innerHTML = "";
}
}
}
,_getTimeStr:function(time) {
var minute = Math.floor(time / 60);
var sec = time % 60;
return minute+":"+(("0" + sec).slice(-2));
}
};
YPlayList.setPlayList = function(paramList) {
var obj = new YPlayList();
obj.paramList["target"] = paramList["target"];
obj.paramList["playListID"] = paramList["playListID"];
obj.paramList["apiKey"] = paramList["apiKey"];
if(paramList["player"]) {
if(paramList["player"]["width"]) {
obj.paramList["player"]["width"] = paramList["player"]["width"];
}
if(paramList["player"]["height"]) {
obj.paramList["player"]["height"] = paramList["player"]["height"];
}
if(paramList["player"]["quality"]) {
obj.paramList["player"]["quality"] = paramList["player"]["quality"];
}
}
var paramKeyList = [
"targetInner"
,"delListItemStrList"
,"addListItemFirst"
,"addListItemLast"
,"isAutoPlay"
,"startVolume"
,"isUseControl"
,"autoHide"
,"thumbnailType"
,"titleTarget"
,"descriptionTarget"
,"controllerTarget"
,"maxResults"
,"itemChangeCallback"
];
for(var i in paramKeyList) {
if(paramKeyList[i] in paramList) {
obj.paramList[paramKeyList[i]] = paramList[paramKeyList[i]];
}
}
YPlayList._ObjList[paramList["playListID"]] = obj;
var targetObj = document.getElementById(obj.paramList["target"]);
if(!targetObj
|| !paramList["playListID"] || paramList["playListID"] == ""
|| !paramList["apiKey"] || paramList["apiKey"] == "") {
alert("Setting Error!!");
return;
}
//コントローラー/リストエリア描画
var controlTagObj = null;
if(obj.paramList["controllerTarget"] == '') {
controlTagObj = document.createElement('div');
if(targetObj.parentNode.lastChild === targetObj) {
targetObj.parentNode.appendChild(controlTagObj);
} else {
targetObj.parentNode.insertBefore(controlTagObj, targetObj.nextSibling);
}
controlTagObj.setAttribute("id", obj.paramList["target"]+"_controller");
} else {
controlTagObj = document.getElementById(obj.paramList["controllerTarget"]);
if(!controlTagObj) {
alert("Setting Error!!");
return;
}
}
if(!YPlayList._isApple) {
var ulObj = document.createElement("ul");
ulObj.style.display = "none";
controlTagObj.appendChild(ulObj);
obj.controlList["controller"] = ulObj;
var liObj = document.createElement("li");
ulObj.appendChild(liObj);
var aObj = document.createElement("a");
aObj.setAttribute("title", "Stop");
aObj.setAttribute("href", "javascript:void(0)");
aObj.setAttribute("class", "stop");
aObj.onclick = function() {
if(!obj.player) {
return;
}
obj.player.seekTo(0, true);
obj.player.stopVideo();
obj.setPlayButton();
};
liObj.appendChild(aObj);
var spanObj = document.createElement("span");
spanObj.appendChild(document.createTextNode("Stop"));
spanObj.setAttribute("class", "inner");
aObj.appendChild(spanObj);
var liObj = document.createElement("li");
ulObj.appendChild(liObj);
var aObj = document.createElement("a");
aObj.setAttribute("title", "Prev");
aObj.setAttribute("href", "javascript:void(0)");
aObj.setAttribute("class", "prev");
aObj.onclick = function() {
if(!obj.player) {
return;
}
if(obj.activeIndex == 0) {
return;
}
obj.activeIndex--;
obj.playList[obj.activeIndex].onclick();
};
liObj.appendChild(aObj);
var spanObj = document.createElement("span");
spanObj.appendChild(document.createTextNode("Prev"));
spanObj.setAttribute("class", "inner");
aObj.appendChild(spanObj);
var liObj = document.createElement("li");
ulObj.appendChild(liObj);
var aObj = document.createElement("a");
aObj.setAttribute("title", "Play");
aObj.setAttribute("href", "javascript:void(0)");
aObj.setAttribute("class", "play");
aObj.onclick = function() {
if(!obj.player) {
return;
}
if(obj.player.getPlayerState() == 1) {
obj.setPlayButton();
obj.player.pauseVideo();
} else {
obj.setPauseButton();
obj.player.playVideo();
}
};
liObj.appendChild(aObj);
var spanObj = document.createElement("span");
spanObj.appendChild(document.createTextNode("Play"));
spanObj.setAttribute("class", "inner");
aObj.appendChild(spanObj);
obj.controlList["play"] = aObj;
var liObj = document.createElement("li");
ulObj.appendChild(liObj);
var aObj = document.createElement("a");
aObj.setAttribute("title", "Next");
aObj.setAttribute("href", "javascript:void(0)");
aObj.setAttribute("class", "next");
aObj.onclick = function() {
if(!obj.player) {
return;
}
if(obj.activeIndex >= obj.playList.length-1) {
return;
}
obj.activeIndex++;
obj.playList[obj.activeIndex].onclick();
};
liObj.appendChild(aObj);
var spanObj = document.createElement("span");
spanObj.appendChild(document.createTextNode("Next"));
spanObj.setAttribute("class", "inner");
aObj.appendChild(spanObj);
var liObj = document.createElement("li");
liObj.style.display = "none";
ulObj.appendChild(liObj);
var aObj = document.createElement("a");
aObj.setAttribute("title", "Repeat playlist");
aObj.setAttribute("href", "javascript:void(0)");
aObj.setAttribute("class", "repeat_off");
aObj.onclick = function() {
if(!obj.player) {
return;
}
obj.isRepeat = !obj.isRepeat;
if(obj.isRepeat) {
this.setAttribute("class", "repeat_on");
this.parentNode.setAttribute("class", "active");
} else {
this.setAttribute("class", "repeat_off");
this.parentNode.setAttribute("class", "");
}
};
liObj.appendChild(aObj);
var spanObj = document.createElement("span");
spanObj.appendChild(document.createTextNode("Repeat"));
spanObj.setAttribute("class", "inner");
aObj.appendChild(spanObj);
obj.controlList["repeat"] = aObj;
if(!YPlayList._isApple) {
var liObj = document.createElement("li");
liObj.style.display = "none";
ulObj.appendChild(liObj);
var aObj = document.createElement("a");
aObj.setAttribute("title", "Mute");
aObj.setAttribute("href", "javascript:void(0)");
aObj.setAttribute("class", "mute_off");
aObj.onclick = function() {
if(!obj.player) {
return;
}
var baseWidth = parseInt(obj.controlList["volume"].clientWidth);
var width = 0;
if(obj.player.isMuted()) {
obj.player.unMute();
this.setAttribute("class", "mute_off");
this.parentNode.setAttribute("class", "");
width = Math.round(obj.preVolume * baseWidth / 100);
} else {
obj.preVolume = obj.player.getVolume();
obj.player.mute();
this.setAttribute("class", "mute_on");
this.parentNode.setAttribute("class", "active");
}
obj.controlList["volume"].firstChild.style.width = width+"px";
};
liObj.appendChild(aObj);
var spanObj = document.createElement("span");
spanObj.appendChild(document.createTextNode("Mute"));
spanObj.setAttribute("class", "inner");
aObj.appendChild(spanObj);
obj.controlList["mute"] = aObj;
var liObj = document.createElement("li");
liObj.style.display = "none";
liObj.setAttribute("class", "volume_area");
ulObj.appendChild(liObj);
var divObj = document.createElement("div");
divObj.setAttribute("class", "volume");
divObj.setAttribute("title", "Volume");
divObj.onmousedown = function(e) {
if(!obj.player) {
return;
}
var x = 0;
if(e) {
x = e.pageX - this.getBoundingClientRect().left - (document.body.scrollLeft || document.documentElement.scrollLeft);
} else {
x = window.event.offsetX;
}
var width = parseInt(this.clientWidth);
var magnification = 100 / width;
if(x > 100) {
x = 100;
} else if(x < 0) {
x = 0;
}
this.firstChild.style.width = x+"px";
obj.player.setVolume(Math.round(x * magnification));
obj.controlList["mute"].setAttribute("class", "mute_off");
obj.controlList["mute"].parentNode.setAttribute("class", "");
};
liObj.appendChild(divObj);
var div2Obj = document.createElement("div");
div2Obj.setAttribute("class", "now_volume");
divObj.appendChild(div2Obj);
obj.controlList["volume"] = divObj;
}
var liObj = document.createElement("li");
liObj.style.display = "none";
liObj.setAttribute("class", "time_area");
ulObj.appendChild(liObj);
var divObj = document.createElement("div");
divObj.setAttribute("class", "time");
liObj.appendChild(divObj);
obj.controlList["time"] = divObj;
}
//動画一覧表示エリア
obj.playListArea = document.createElement('div');
obj.playListArea.setAttribute("class", "play_list");
controlTagObj.appendChild(obj.playListArea);
};
YPlayList.create = function() {
for(var key in YPlayList._ObjList) {
//PlayList取得関数
eval('YPlayList._playListFuncList.push(function() {'
+' var targetObj = document.getElementById("'+YPlayList._ObjList[key].paramList["target"]+'");'
+' var tag = document.createElement("script");'
+' tag.src = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,status&playlistId='+YPlayList._ObjList[key].paramList["playListID"]+'&key='+YPlayList._ObjList[key].paramList["apiKey"]+'&callback=YPlayListCallback&maxResults='+Number(YPlayList._ObjList[key].paramList["maxResults"])+'";'
+' targetObj.parentNode.insertBefore(tag, targetObj);'
+'});'
);
}
if(YPlayList._playListFuncList.length > 0) {
var func = YPlayList._playListFuncList.shift();
setTimeout(func, 0);
}
};
YPlayList.play = function(playListID, index) {
var targetObj = YPlayList._ObjList[playListID];
if(targetObj && targetObj.player) {
targetObj.activeIndex = index;
var videoId = targetObj.playList[index].videoId;
if(YPlayList._isApple) {
var iframe = targetObj.player.getIframe();
iframe.src = "http://www.youtube.com/embed/"+videoId+"?enablejsapi=1"
+ "&rel=0&showsearch=0&showinfo=0&controls=1&fs="+targetObj.paramList["player"]["fs"];
} else {
targetObj.player.loadVideoById(videoId, 0, targetObj.paramList["player"]["quality"]);
}
for(var key in targetObj.playList) {
if(key == index) {
targetObj.playList[key].parentNode.parentNode.setAttribute("class", "playlist_item active");
} else {
targetObj.playList[key].parentNode.parentNode.setAttribute("class", "playlist_item");
}
}
}
};
function onYouTubeIframeAPIReady() {
for(var key in YPlayList._ObjList) {
var obj = YPlayList._ObjList[key];
var target = obj.paramList["target"];
if(obj.paramList["targetInner"]&&obj.paramList["targetInner"]!="") {
target = obj.paramList["targetInner"];
}
eval('obj.player = new YT.Player("'+target+'", {'
+' height: '+obj.paramList["player"]["height"]
+' ,width: '+obj.paramList["player"]["width"]
+' ,playerVars : {'
+' rel: 0'
+' ,showsearch: 0'
+' ,showinfo: 0'
+' ,fs: '+obj.paramList["player"]["fs"]
+' ,wmode: "transparent"'
+' ,controls: '+((YPlayList._isApple||obj.paramList["isUseControl"])?'1':'0')
+' ,autohide: '+obj.paramList["autoHide"]
+' }'
+' ,events: {'
+' "onReady": function(e) {YPlayList._ObjList["'+key+'"].onPlayerReady(e);}'
+' ,"onStateChange": function(e) {YPlayList._ObjList["'+key+'"].onPlayerStateChange(e.data);}'
+' }'
+'});'
);
}
}
function onYouTubePlayerReady(playerid) {
var obj = document.getElementById("p_"+playerid);
YPlayList._ObjList[playerid].player = obj;
var callback = 'YPlayList._ObjList["'+playerid+'"].onPlayerStateChange';
obj.addEventListener("onStateChange", callback);
var myObj = YPlayList._ObjList[playerid];
myObj.controlList["mute"].parentNode.style.display = "";
myObj.controlList["volume"].parentNode.style.display = "";
myObj.controlList["repeat"].parentNode.style.display = "";
myObj.controlList["time"].parentNode.style.display = "";
myObj.controlList["controller"].style.display = "";
var baseWidth = parseInt(myObj.controlList["volume"].clientWidth);
width = Math.round(myObj.paramList["startVolume"] * baseWidth / 100);
myObj.controlList["volume"].firstChild.style.width = width+"px";
}
function YPlayListCallback(ret) {
if(ret["items"] && ret["items"].length > 0) {
var target = YPlayList._ObjList[ret["items"][0]["snippet"]["playlistId"]];
var itemList = ret["items"];
var isTop = true;
var index = 0;
var changeActiveIndexFunc = function() {
if(target.player) {
target.activeIndex = this.index;
if(YPlayList._isApple) {
var iframe = target.player.getIframe();
iframe.src = "http://www.youtube.com/embed/"+this.videoId+"?enablejsapi=1"
+ "&rel=0&showsearch=0&showinfo=0&controls="+(YPlayList._isApple||target.paramList["isUseControl"]?'1':'0')+"&fs="+target.paramList["player"]["fs"];
+ "&autoplay="+(!YPlayList._isApple&&target.paramList["isAutoPlay"]?'1':'0');
} else {
target.player.loadVideoById(this.videoId, 0, target.paramList["player"]["quality"]);
}
for(var key in target.playList) {
target.playList[key].parentNode.parentNode.setAttribute("class", "playlist_item");
}
this.parentNode.parentNode.setAttribute("class", "playlist_item active");
if(target.paramList["titleTarget"]
&& target.paramList["titleTarget"] != "") {
var titleTarget = document.getElementById(target.paramList["titleTarget"]);
if(titleTarget) {
for(var i=titleTarget.childNodes.length-1; i>=0; i--) {
titleTarget.removeChild(titleTarget.childNodes[i]);
}
titleTarget.appendChild(document.createTextNode(String(this.titleText)));
}
}
if(target.paramList["descriptionTarget"]
&& target.paramList["descriptionTarget"] != "") {
var descriptionTarget = document.getElementById(target.paramList["descriptionTarget"]);
if(descriptionTarget) {
for(var i=descriptionTarget.childNodes.length-1; i>=0; i--) {
descriptionTarget.removeChild(descriptionTarget.childNodes[i]);
}
var strTmp = String(this.description).split("\n");
for(var i=0; i0) {
descriptionTarget.appendChild(document.createElement("br"));
}
descriptionTarget.appendChild(document.createTextNode(strTmp[i]));
}
}
}
if(typeof(target.paramList["itemChangeCallback"]) == "function") {
target.paramList["itemChangeCallback"](target.activeIndex);
}
}
};
for(var key=0; key 0
&& target.paramList["thumbnailType"] < 6) {
var obj = document.createElement("div");
obj.setAttribute("class", "playlist_item_img");
baseObj.appendChild(obj);
var aObj = document.createElement("a");
aObj.videoId = itemList[key]["snippet"]["resourceId"]["videoId"];
aObj.index = index;
aObj.onclick = changeActiveIndexFunc;
aObj.titleText = title;
aObj.description = itemList[key]["snippet"]["description"];
aObj.setAttribute("href", "javascript:void(0);");
obj.appendChild(aObj);
var imgObj = document.createElement("img");
var imgTypeList = {1:'default', 2:'medium', 3:'hight', 4:'standard', 5:'maxres'};
imgObj.setAttribute("src", itemList[key]["snippet"]["thumbnails"][imgTypeList[target.paramList["thumbnailType"]]]["url"]);
aObj.appendChild(imgObj);
}
var obj = document.createElement("div");
obj.setAttribute("class", "playlist_item_select");
baseObj.appendChild(obj);
var aObj = document.createElement("a");
target.playList.push(aObj);
obj.appendChild(aObj);
aObj.appendChild(document.createTextNode(title));
aObj.videoId = itemList[key]["snippet"]["resourceId"]["videoId"];
aObj.index = index;
aObj.onclick = changeActiveIndexFunc;
aObj.titleText = title;
aObj.description = itemList[key]["snippet"]["description"];
aObj.setAttribute("href", "javascript:void(0);");
if(isTop) {
baseObj.setAttribute("class", "playlist_item active");
target.activeIndex = index;
isTop = false;
if(target.paramList["titleTarget"]
&& target.paramList["titleTarget"] != "") {
var titleTarget = document.getElementById(target.paramList["titleTarget"]);
if(titleTarget) {
for(var i=titleTarget.childNodes.length-1; i>=0; i--) {
titleTarget.removeChild(titleTarget.childNodes[i]);
}
titleTarget.appendChild(document.createTextNode(String(aObj.titleText)));
}
}
if(target.paramList["descriptionTarget"]
&& target.paramList["descriptionTarget"] != "") {
var descriptionTarget = document.getElementById(target.paramList["descriptionTarget"]);
if(descriptionTarget) {
for(var i=descriptionTarget.childNodes.length-1; i>=0; i--) {
descriptionTarget.removeChild(descriptionTarget.childNodes[i]);
}
var strTmp = String(aObj.description).split("\n");
for(var i=0; i0) {
descriptionTarget.appendChild(document.createElement("br"));
}
descriptionTarget.appendChild(document.createTextNode(strTmp[i]));
}
}
}
if(typeof(target.paramList["itemChangeCallback"]) == "function") {
target.paramList["itemChangeCallback"](target.activeIndex);
}
} else {
baseObj.setAttribute("class", "playlist_item");
}
index++;
}
}
}
if(YPlayList._playListFuncList.length > 0) {
var func = YPlayList._playListFuncList.shift();
setTimeout(func, 0);
} else {
var keyTop = null;
for(keyTop in YPlayList._ObjList) {
break;
}
if(keyTop) {
var targetTop = document.getElementById(YPlayList._ObjList[keyTop].paramList["target"]);
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
targetTop.parentNode.insertBefore(tag, targetTop);
}
}
}