YoutubeのJavascriptAPIプレーヤー、プレイリストの再生。

前に書いたYoutubeのJavascriptAPIプレーヤーをアップデートしました。
主な変更は
・4パターンのプレイリスト再生に対応
以上。

プレイリストと呼ばれるものには
A 任意のビデオ1,任意のビデオ2,任意のビデオ3....の連続再生
B 任意のプレイリストの再生
C 特定ワードの検索でヒットした動画を連続再生
D 特定ユーザーの動画の連続再生
があるようです。
こちらも参照ください
YouTube JavaScript Player API Reference（日本語）

Googleドライブのホスティング機能が来年8月末に終了するようです…
以下実行例とソースコード

VID	VID 開始指定	URL 開始指定	URL 開始指定
A VID連続再生	B PLAYLIST	C PLAYLIST 検索ワード	D PLAYLIST ユーザー

↑クリックして再生


htmlソース（初期化）

<div id="ytplayer"></div>
<!--<div id="playerlog"></div>-->
<!--<div id="embedCode"></div>-->
<input id="initvid" type="hidden" value="iCqrRdSM7mE" />
<!--A-->
<!--<input id="initvids" type="hidden" value="iCqrRdSM7mE','qD6bmzXGjmQ" />-->
<!--B-->
<!--<input id="initplaylist" type="hidden" value="PL88Z5tUCkdGOS-hV7u34rq4Hx8tPxywed,playlist" />-->
<!--C-->
<!--<input id="initplaylist" type="hidden" value="古賀成美,search" />-->
<!--D-->
<!--<input id="initplaylist" type="hidden" value="NMB48official,user_uploads" />-->

htmlソース（クリックして呼び出し部分）

<table border="1">
<tr>
<td onclick="loadVideo('iCqrRdSM7mE','0','default');">VID</td>
<td onclick="loadVideo('qD6bmzXGjmQ',65,'default');">VID 開始指定</td>
<td onclick="loadVideo('https://www.youtube.com/watch?v=RvmCPc-HadU&t=15');">URL 開始指定</td>
<td onclick="loadVideo('https://youtu.be/FeJUIMxOc48?t=1m41s');">URL 開始指定</td>
</tr>
<tr>
<td onclick="loadVideos(['iCqrRdSM7mE','qD6bmzXGjmQ']);">A-VID連続再生</td>
<td onclick="loadPlaylist('PL88Z5tUCkdGOS-hV7u34rq4Hx8tPxywed','playlist');">B-PLAYLIST</td>
<td onclick="loadPlaylist('古賀成美','search');">C-PLAYLIST 検索ワード</td>
<td onclick="loadPlaylist('NMB48official','user_uploads');">D-PLAYLIST ユーザー</td>
</tr>
</table>

javascriptソース例（基礎部分だけ）
loadVideoとcueVideoの違いはすぐ再生するか否かです。
javascript全体は→my_youtube_player.js(2016/8/31に期限切れ)

/*
//quality small|medium|large|hd720|hd1080|highres|default
//listtype playlist|search|user_uploads
/**/
var ytplayer;
window.onload = function() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
};
function onYouTubeIframeAPIReady() {
var initvid;
var initvids;
var initplaylist;
var ele;
if(document.getElementById('initvid')){ //普通の
ele=document.getElementById('initvid');
initvid=ele.value;
}
else if(document.getElementById('initvids')){ //vid1,vid2,vid3....
ele=document.getElementById('initvids');
initvids=ele.value;
}
else if(document.getElementById('initplaylist')){ //再生リスト
ele=document.getElementById('initplaylist');
initplaylist=ele.value;
}
//console.log("onYouTubeIframeAPIReady:"+initvid);
ytplayer = getYTPlayer(ele,initvid,initvids,initplaylist);
}
function getYTPlayer(ele,initvid,initvids,initplaylist){
if(!ele){
return new YT.Player('ytplayer', {
height: h,
width: w,
playerVars: {
autoplay: 0,
rel: 1,
fs: 1,
showinfo: 1,
controls: 1,
modestbranding: 0,
autohide: 1,
color: 'red',
theme: 'light',
enablejsapi: 1,
version: 3
},
events: {
'onReady': onPlayerReady,
'onError': onPlayerError,
'onStateChange': onPlayerStateChange
}
});
}
var w = (ele.style.width) ? ele.style.width : 512;
var h = (ele.style.height) ? ele.style.height : 312;
if(initvid){
var startsec;
var quality;
var protocol=ele.value.match(/ttp:\/\/|http:\/\/|https:\/\//);
if (protocol){
var args=getArgsFromURL(ele.value);
initvid=args["v"];
startsec=args["t"];
quality=args["vq"];
}
else{
initvid=ele.value;
startsec=0;
quality="default";
}
return new YT.Player('ytplayer', {
height: h,
width: w,
videoId: initvid,
playerVars: {
autoplay: 0,
rel: 1,
fs: 1,
showinfo: 1,
controls: 1,
modestbranding: 0,
autohide: 1,
color: 'red',
theme: 'light',
enablejsapi: 1,
version: 3
},
events: {
'onReady': onPlayerReady,
'onError': onPlayerError,
'onStateChange': onPlayerStateChange
}
});
}
else if(initvids){
return new YT.Player('ytplayer', {
height: h,
width: w,
playerVars: {
playlist: initvids,
autoplay: 0,
rel: 1,
fs: 1,
showinfo: 1,
controls: 1,
modestbranding: 0,
autohide: 1,
color: 'red',
theme: 'light',
enablejsapi: 1,
version: 3
},
events: {
'onReady': onPlayerReady,
'onError': onPlayerError,
'onStateChange': onPlayerStateChange
}
});
}
else if(initplaylist){
var args=initplaylist.split(',');
return new YT.Player('ytplayer', {
height: h,
width: w,
playerVars: {
list: args[0],
listType:args[1],
autoplay: 0,
rel: 1,
fs: 1,
showinfo: 1,
controls: 1,
modestbranding: 0,
autohide: 1,
color: 'red',
theme: 'light',
enablejsapi: 1,
version: 3
},
events: {
'onReady': onPlayerReady,
'onError': onPlayerError,
'onStateChange': onPlayerStateChange
}
});
}
}

function loadVideo(idOrUrl) { //単品
loadVideo(idOrUrl, "0", "default");
}
function loadVideo(idOrUrl, startSeconds, quality) {
// console.log("loadVideo:"+idOrUrl+" "+startSeconds+" "+quality);
var protocol=idOrUrl.match(/ttp:\/\/|http:\/\/|https:\/\//);
if (protocol) {
var args=getArgsFromURL(idOrUrl);
ytplayer.loadVideoById(args['v'], args['t'], args['vq']);
} else {
ytplayer.loadVideoById(idOrUrl, parseInt(startSeconds), quality);
}
}
function loadVideos(list) { //vid1,vid2,vid3...
loadVideos(list,"0", "0","default");
}
function loadVideos(list,index, startSeconds,quality) {
//console.log("loadVideos:"+list+" "+index+" "+startSeconds+" "+quality);
ytplayer.loadPlaylist(list,parseInt(index),parseInt(startSeconds),quality);
}
function loadPlaylist(list,listtype) { //listtype=playlist|search|user_uploads ,list=playlistid|query|user
loadPlaylist(list,listtype,"0", "0","default");
}
function loadPlaylist(list,listtype ,index, startSeconds,quality) {
//console.log("loadPlaylist:"+list+" "+listtype+" "+index+" "+startSeconds+" "+quality);
ytplayer.loadPlaylist(
{
list:list,
listType:listtype,
index:index,
startSeconds:startSeconds,
suggestedQuality:quality
});
}
function cueVideo(idOrUrl) { //単品
}
function cueVideo(idOrUrl, startSeconds, quality) {
//console.log("cueVideo:"+idOrUrl+" "+startSeconds+" "+quality);
}
function cueVideos(list) { //vid1,vid2,vid3...
}
function cueVideos(list,index, startSeconds,quality) {
//console.log("cueVideos:"+list+" "+index+" "+startSeconds+" "+quality);
}
function cuePlaylist(list,listtype) { //listtype=playlist|search|user_uploads , list=playlistid|query|user
}
function cuePlaylist(list,listtype ,index, startSeconds,quality) {
//console.log("cuePlaylist:"+list+" "+listtype+" "+index+" "+startSeconds+" "+quality);
}
function getArgsFromURL(url){
var args = new Object();
if(url.indexOf("/embed/")>-1){
url=url.substring(url.indexOf("/embed/")+"/embed/".length,url.length);
if(url.indexOf("?")>-1)
args["v"]=url.substring(0,url.indexOf("?"));
else
args["v"]=url.substring(0,url.length);
}
else if(url.indexOf("/v/")>-1){
url=url.substring(url.indexOf("/v/")+"/v/".length,url.length);
if(url.indexOf("?")>-1)
args['v']=url.substring(0,url.indexOf("?"));
else
args['v']=url.substring(0,url.length);
}
else if(url.indexOf("youtu.be/")>-1){
url=url.substring(url.indexOf("youtu.be/")+"youtu.be/".length,url.length);
if(url.indexOf("?")>-1)
args["v"]=url.substring(0,url.indexOf("?"));
else
args["v"]=url.substring(0,url.length);
}
var pair=url.substring(url.lastIndexOf("?")+"?".length,url.length).split('&');
for(var i=0;pair[i];i++) {
var kv = pair[i].split('=');
args[kv[0]]=kv[1];
}
if(args.t){
var min=0;
var sec=0;
var s=args.t;
if(s.indexOf("m")<0&&s.indexOf("s")<0)
;
else{
if(s.indexOf("m")>-1){
min=s.split('m')[0];
s=s.split('m')[1];
}
if(s.indexOf("s")>-1){
sec=s.split('s')[0];
s=s.split('s')[1];
}
args.t=parseInt(min)*60+parseInt(sec);
}
}
else{
args.t=0;
}
return args;
}
function updateHTML(elmId, value) {
}
function getEmbedCode(updateParams) {
}
function getVideoUrl() {
}
function onPlayerReady(event) {
}
function onPlayerStateChange(event) {
}
function onPlayerError(event) {
}
function stopVideo() {
}
function seekTo(seconds, allowSeekAhead) {
}