このページの左側の「Youtubeにアップした自作動画」の表示を自作のものに変更してみた。
参考にしたのは下記URL。
「YouTube Data API」のJSONPを使ってJSのみでYouTubeを検索する。
YouTube Data APIを使ってお気に入り動画を表示させる方法の覚書
<div id="result"></div>
<script type="text/javascript">
function listVideos(data)
{
var html = "";
if(data.feed.openSearch$totalResults.$t > 0){
var entries = data.feed.entry;
for(var i=0;i<entries.length;i++){
var entry = entries[i];
var title = entry.title.$t.substr(0,50);
var thumbnailUrl = entry.media$group.media$thumbnail[0].url;
var videoUrl = entry.media$group.media$player[0].url;
var rating_avg = entry.gd$rating?entry.gd$rating.average:0;//rating["average"];
var rating_html = "";
var j = 0.0;
for(var r = parseInt(rating_avg); j < r;++j)
rating_html += "<img src=\"http://gdata.youtube.com/static/images/" + "icn_star_full_11x11.gif\" />";
if((rating_avg - j) >= 0.5){
rating_html += "<img src=\"http://gdata.youtube.com/static/images/" + "icn_star_half_11x11.gif\" />";
++j;
}
for(;j < 5;++j)
{
rating_html += "<img src=\"http://gdata.youtube.com/static/images/" + "icn_star_empty_11x11.gif\" />";
}
var desc = "<p style=\"padding:2px;font-size:6pt;line-height: 105%;\">" + entry.media$group.media$description.$t + "</p>";
html += "<div style=\"margin:4px\"><a href=\"" + videoUrl +"\" title=\""+ title +"\" target=\"_blank\"><img src=\"" + thumbnailUrl +"\" width=\"80\" height=\"60\" alt=\""+ title +"\" align=\"left\" />" + title + "</a><br>" + rating_html + "<br><span style=\"font-size:6pt\">再生回数：" + (entry.yt$statistics?entry.yt$statistics.viewCount:0) + "</span><br clear=\"all\">" + desc + "</div>";
}
}else{
html += "<p>not found</p>";
}
document.getElementById("result").innerHTML = html;
};
(function(){
document.getElementById("result").innerHTML = "loading...";
var jsonpURL =
"http://gdata.youtube.com/feeds/videos?author=sfpg&orderby=viewCount&alt=json-in-script&callback=listVideos";
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = jsonpURL;
var head = document.getElementsByTagName("head")[0];
head.appendChild(script);
})();
</script>