/********************************************************************* * 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); } } }