youtubeデモ

sw_lucchini

2012-02-09 09:57:00

License: MIT License

Fork: 0

Fav: 0

View: 518

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 55 lines
HTML 2 lines
CSS 61 lines

youtubeデモ
jQuery v1.7.1

//時間の表記
function formatDuration(duration) {
	var hour = Math.floor(duration / 3600); //時
	var minute = Math.floor(duration / 60) % 60; //分
	var second = duration % 60; //秒
	
	if (hour) {
		return hour.toString() + ':' + zero(minute) + ':' + zero(second);
	} else {
		return minute.toString() + ':' + zero(second);
	}
}

//10未満なら先頭に0をつける
function zero(num) {
	if (num < 10) {
		return '0' + num.toString();
	} else {
		return num.toString();
	}
}

//3桁ごとにカンマをつける
function comma(num) {
	var str = new String(num).replace(/,/g, "");
	while(str != (str = str.replace(/^(-?\d+)(\d{3})/, "$1,$2")))
	return str;
}

youtubeデモ

$(document).ready(function() { var url = "http://gdata.youtube.com/feeds/api/users/Apple/uploads"; $.getJSON(url, { alt:'json' }, function(json) { var entry = json.feed.entry; //entryにアクセスしやすく var str = ''; for (var i = 0; i < entry.length; i++) { var media = entry[i].media$group; //media$groupにアクセスしやすく var author = entry[i].author[0].name.$t; //動画投稿者 var src = media.media$thumbnail[2].url; //120×90の小さいサムネイル画像 var href = media.media$player[0].url; //リンク先 var title = media.media$title.$t; //タイトル var duration = formatDuration(media.yt$duration.seconds); //動画の時間 var viewCount = comma(entry[i].yt$statistics.viewCount); //再生回数 //liタグ作成 str += '<li><a href="' + href + '">'; str += '<div class="left"><img class="thumb" src="' + src + '"><span class="duration">' + duration + '</span></div>'; str += '<div class="right"><span class="title">' + title + '</span><span class="author">' + author + '</span><span class="viewCount">再生回数：' + viewCount + '回</span></div>'; str += '</a></li>'; } $('ul#playList').append(str); }); }); //時間の表記 function formatDuration(duration) { var hour = Math.floor(duration / 3600); //時 var minute = Math.floor(duration / 60) % 60; //分 var second = duration % 60; //秒 if (hour) { return hour.toString() + ':' + zero(minute) + ':' + zero(second); } else { return minute.toString() + ':' + zero(second); } } //10未満なら先頭に0をつける function zero(num) { if (num < 10) { return '0' + num.toString(); } else { return num.toString(); } } //3桁ごとにカンマをつける function comma(num) { var str = new String(num).replace(/,/g, ""); while(str != (str = str.replace(/^(-?\d+)(\d{3})/, "$1,$2"))) return str; }<ul id="playList"> </ul>* { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } body { background: #FFF; } ul { width: 320px; list-style: none; } li { position: relative; padding: 3px; border-bottom: 1px solid #EAEAEA; } a {text-decoration: none;} div.left { position: relative; width: 120px; height: 68px; overflow: hidden; } img.thumb { margin-top: -11px; vertical-align: bottom; } .duration { position: absolute; right: 3px; bottom: 3px; padding: 3px 5px; background: rgba(0,0,0,.5); color: #FFF; font-size: 10px; font-weight: bold; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } div.right { position: absolute; width: 188px; right: 0; top: 0; color: #242424; font-size: 12px; } div.right span {display: block;} span.author, span.viewCount { text-align: right; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/zkor/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/sw_lucchini/zkor" title="youtubeデモ">youtubeデモ - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code