Ustreamで「CNNNews」を含むユーザー名のチャンネルを検索し、最新10件の動画情報を一覧表示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
<!-- JS -->
<script type="text/javascript">
$(function(){
// 「CNNNews」を含むユーザー名のチャンネルを検索
var url="http://api.ustream.tv/json/channel/recent/search/username:like:CNNNews?limit=10&key=B504D5B2AF2915F78643E1F1F7E612ED&callback={callback}";
$.getJSONP(url, function(json){
var s="";
var formatStr="";
var j=0;
$.each(json, function(i, item){
if(!item.isProtected){
s+="<li>";
s+="<div class='video'>"+item.embedTag+"</div>";
s+="<div class='videoinfo'><a href='"+item.url+"'><img src='"+item.imageUrl.small+"' class='thumb' /></a>";
s+="<strong>タイトル："+item.title+"</strong><br>";
//s+="user:"+item.user.id;
s+="ユーザー：<a href='"+item.user.url+"'>"+item.user.userName+"</a><br>";
s+="説明："+item.description+"<br>";
s+="作成日："+item.createdAt+"<br>";
s+="最終配信日："+item.lastStreamedAt+"<br>";
s+="評価："+item.rating+"<br>";
s+="ステータス："+item.status+"<br>";
s+="現在、"+item.viewersNow+"人が視聴中";
//s+="urlTitleName："+item.urlTitleName+"<br>";
s+="</div>";
s+="</li>";
}
});
$("#tw").append("<ul>"+s+"</ul>");
});
});
</script>
<style type="text/css">
#tw {
margin:0; padding:0;
border:1px solid #ccc;
font-size:12px;
background:#eee;
webkit-border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
overflow:hidden;
}
#tw ul {
list-style:none;
margin:0; padding:5px;
}
#tw p {
margin:0; padding:0;
}
#tw li {
margin:5px; padding:0 0 10px 0;
position:relative;
display:block;
clear:both;
overflow:hidden;
}
#tw li .video {
float:right;
position:relative;
margin:0; padding:0;
width:320px; height:260px;
overflow:hidden;
}
#tw li .videoinfo {
margin:0; padding:0 0 0 130px;
}
#tw .thumb {
position:absolute;
width:120px; height:90px;
top:0; left:0;
display:block;
}
#tw .thumb img {
display:block;
webkit-border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;
overflow:hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h1>設置サンプル</h1>
<p>Ustreamで「CNNNews」を含むユーザー名のチャンネルを検索し、最新10件の動画情報を一覧表示。</p>
<!-- CODE -->
<div id="tw"><ul></ul></div>
<!-- / CODE -->
</div>
</body>
</html>