Skip to content

Instantly share code, notes, and snippets.

@kimuchi1203

kimuchi1203/myplayer.html

Created June 16, 2012 10:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kimuchi1203/2940871 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kimuchi1203/2940871 to your computer and use it in GitHub Desktop.
Download ZIP
play YouTube related video automatically.
Raw
myplayer.html
<html>
<head>
<script type="text/javascript" src="../js/swfobject.js"></script>
<script type="text/javascript" src="../js/myplayer.js"></script>
</head>
<body>
<input type="textarea" onkeypress="pressEnter(event.keyCode, this.value);"></input>
<div id="myplayer"></div>
<script type="text/javascript">
<!--
var params={allowScriptAccess: "always" };
var atts={ id:"myplayer" };
swfobject.embedSWF(
"http://www.youtube.com/v/"+current+"&enablejsapi=1&playerapiid=player001&border=1&autoplay=1",
"myplayer", "580", "360", "8", null, null, params, atts);
-->
</script>
<div id="info">
<div id="related"></div>
</div>
</body>
</html>
Raw
myplayer.js
//cf. http://i-love-windows.blog.so-net.ne.jp/2009-06-07
var ytplayer;
var next;
var current = "ZmYRllome8Q";
function startVideo(id){
ytplayer.loadVideoById(id);
current=id;
sendReqNext(current);
}
function jumpVideo(id){
return function() {
startVideo(id);
return false;
};
}
function onytplayerStateChange(newState){
if(newState==0){//play end
startVideo(next);
}
}
function onYouTubePlayerReady(playerId){
ytplayer=document.getElementById("myplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
sendReqNext(current);
}
function parseResponseVideoSearch(responseXML){
var entry = responseXML.getElementsByTagName("entry")[0];
var id = entry.getElementsByTagName("id")[0].firstChild.nodeValue;
current = id.substr(id.lastIndexOf(":")+1);
ytplayer.loadVideoById(current);
sendReqNext(current);
}
function parseResponseRelated(responseXML){
links = responseXML.getElementsByTagName("entry");
parent_div = document.getElementById("info");
related_div = document.getElementById("related");
parent_div.removeChild(related_div);
related_div = document.createElement("div");
related_div.id = "related";
var id = links[0].getElementsByTagName("id")[0].firstChild.nodeValue;
next = id.substr(id.lastIndexOf(":")+1);
console.log(next);
for(var i=0;i<links.length;++i){
linkURL = links[i].getElementsByTagName("id")[0].firstChild.nodeValue;
linkNode = document.createElement("a");
linkNode.innerHTML = links[i].getElementsByTagName("title")[0].firstChild.nodeValue;
linkNode.setAttribute("href", linkURL);
linkNode.onclick = jumpVideo(linkURL.substr(linkURL.lastIndexOf(":")+1));
related_div.appendChild(linkNode);
related_div.appendChild(document.createElement("br"));
}
parent_div.appendChild(related_div);
}
function checkStatus(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
console.log(xmlHttp.responseXML);
parseResponseRelated(xmlHttp.responseXML);
}
}
function sendReqNext(current){
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = checkStatus;
xmlHttp.open("GET", "http://gdata.youtube.com/feeds/api/videos/"+current+"/related?orderby=rating&max-results=5&v=2", true);
xmlHttp.send(null);
}
function pressEnter(code, value){
if(13===code){ searchVideo(htmlEscape(value)); }
}
function searchVideo(keyword){
xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = getVideo;
xmlHttp.open("GET", "http://gdata.youtube.com/feeds/api/videos?q="+keyword+"&max-results=1&v=2");
xmlHttp.send(null);
}
function getVideo(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
console.log(xmlHttp.responseXML);
parseResponseVideoSearch(xmlHttp.responseXML);
}
}
function htmlEscape(str){
//cf. d.hatena.ne.jp/mtoyoshi/20090226/1235644636
var map = {
"<":"&lt;",
">":"&gt;",
"&":"&amp;",
"'":"&#39;",
"\"":"&quot;",
" ":"+"//&nbsp; --> '+' use in query
};
return str.replace(/<|>|&|'|"|\s/g, function(s){ return map[s]; });
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment