youtubeデモ sw_lucchini Follow 2012-02-09 09:57:00 License: MIT License Fork0 Fav0 View518 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 55 lines HTML 2 lines CSS 61 lines youtubeデモ jQuery v1.7.1 $(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> youtubeデモ * { 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; } $(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; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet 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> youtube Tweet twitter Tags youtube Forked sort new page view favorite forked forked: youtubeデモ ryop_5 00 12views 56/2/61 youtube forked: youtubeデモ animegaz 00 82views 56/2/61 youtube