Youtubeの埋め込みプレーヤーが重いので1つにしてリンクで複数動画を切り替える※追記：GoogleDriveにホスティング
大雑把ではありますが、やりたいのはこれです。| 月曜（大段・照井） | 火曜（井尻・植田） | 水曜（石田・西澤） | |
| 2015年05月25日- | ゲスト黒川 | ゲスト日下 | ゲスト内木 |
| 2015年05月18日- | ゲスト古賀 | ゲスト鵜野 | ゲスト久代 |
| 2015年05月11日- | ゲスト磯 | ゲスト松岡 | ゲスト西村 |
| 2015年05月04日- | ゲスト石塚 | ゲスト須藤 | ゲスト松村 |
| 2015年04月27日- | ゲスト太田 | ゲスト武井 | ゲスト川上千 |
| 2015年04月20日- | ゲスト森田 | ゲスト内木 | ゲスト林 |
| 2015年04月13日- | ゲスト中野 | ゲスト石塚 | ゲスト黒川 |
| 2015年04月06日- | ゲスト城 | ゲスト | ゲスト明石 |
| 2015年03月22日- | ゲスト黒川 | ゲスト鵜野 | ゲスト |
| 2015年03月16日- | ゲスト須藤 | ゲスト上枝 | ゲスト |
| 2015年03月09日- | ゲスト松村 | ゲスト川上千 | ゲスト武井 |
| 2015年03月02日- | ゲスト林 | ゲスト | ゲスト中野 |
- id:
- seek(sec):
ソースはこれです。
参考：YouTube IFrame API
my_youtube_player.html
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="src/my_youtube_player.js"></script>
<!--↑と大体同じ.jsファイルをGoogle Driveにホスティングしました-->
<!--<script type="text/javascript" src="https://ffb53aa3ecbc87f152cc84aadc31d7214dac224d-www.googledrive.com/host/0B7bRq8mWofTuNnk1X0Z4SU03VFk"></script>-->
</head>
<body>
<div id="ytplayer"></div>
<input id="initvid" type="hidden" value="M7lc1UVf-VE"></input>
<div><a href="#" onclick="loadVideo('TodR8ChxTO0','0','default');">2015年05月11日 ゲスト西村</a></div>
<div><a href="#" onclick="loadVideo('qCg5HbyLENU','0','default');">2015年05月05日 ゲスト須藤</a></div>
<div><a href="#" onclick="loadVideo('fCvEf8ygaLA','0','default');">2015年05月20日 ゲスト古賀</a></div>
</div>
<ul class="margin0">
<li>
id:
<input id="loadvideoid" type="text" value="" >
<input type="button" onclick="loadVideo(document.getElementById('loadvideoid').value,'0','default')" value="load" />
</li>
</ul>
<ul class="margin0">
<li>
seek(sec): <input id="seekto" type="text">
<input value="move" onclick="seekTo(document.getElementById('seekto').value, true);" type="submit">
</li>
</ul>
</body>
</html>
my_youtube_player.js
var ytplayer;
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=document.getElementById('initvid').value;
ytplayer = new YT.Player('ytplayer', {
height: '295',
width: '480',
videoId: initvid,
playerVars:{
autoplay:0,
controls:1,
enablejsapi:1,
version:3,
theme:'light'
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
;
}
function seekTo(seconds, allowSeekAhead){
ytplayer.seekTo(seconds, allowSeekAhead);
}
function loadVideo(idOrUrl, startSeconds, quality){
var urlRegex = /http\:/;
if (idOrUrl.match(urlRegex)){
ytplayer.loadVideoByUrl(idOrUrl, parseInt(startSeconds), quality);
}
else{
ytplayer.loadVideoById(idOrUrl, parseInt(startSeconds), quality);
}
}
※2016年以降Google Driveのホスティング機能が使えなくなったためDropboxに移行
記事
