主にIEではまったのでメモ。
なんかYouTubeのチャンネルを取得して一覧つくってーってのをやることになったんで方法をいろいろ探してたら、
loop0429さんの記事にまさにそのとおり！なスクリプトがあったので、ちょっと修正したりしてとりあえず、うごくようになったんですが、
どういうわけかIEだけ取得できない。
またIEか。
とりあえず「getJSON IE」とかで検索したら、結構いろいろでてくる。みんなはまるらしい。
で、いろいろ調べた結果、キャッシュがどうとかで、URLの末尾にタイムスタンプを追加して同じアクセスにならないように〜みたいな感じなのかな？
そういう手法が紹介されてたんだけど、それも動かなくて、どうしようって思っていたのですが、
どうやら取得するURLのおしりに「callback=?」ってくっつければ大丈夫らしい。
と、いうことでやってみた。
うちの環境ではこれでいけました。
とりあえず，HTML側に，jQueryで書き出したやつを格納するul要素を用意して…
|
1 |
<ul id="WN_youtube_gallery"></ul> |
jQueryはこんなかんじ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
jQuery(document).ready(function($) { $('ul#WN_youtube_gallery').html('<li class="loading">LOADING...</li>'); var ytchanneluri = "http://gdata.youtube.com/feeds/api/users/Apple/uploads?callback=?"; $.getJSON(ytchanneluri, { alt: 'json' }, function(json) { var entry = json.feed.entry; //entryにアクセスしやすく var maxShow = 5; //取得する最大数（entry.lengthを指定すると全部） var str = ''; var loaded = 0; for (var i = 0; i < maxShow; i++) { var media = entry[i].media$group; //media$groupにアクセスしやすく // いろいろ取得 (不要なのは消してOK) // 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 += '<img class="thumb" src="' + src + '"><span class="duration">' + duration + '</span>'; str += '</a></li>'; } $('ul#WN_youtube_gallery').prepend(str); $('ul#WN_youtube_gallery > li.loading').hide(); }); }); //時間の表記 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; } function MM_openBrWindow(theURL, winName, features) { //v2.0 window.open(theURL, winName, features); } |
13行目から18行目で欲しいデータを変数にうつして，その下でLiタグにいれてるって感じですね。
あとはCSSで整形してあげれば完成です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
ul#WN_youtube_gallery li { float:left; position:relative; } ul#WN_youtube_gallery .duration { position:absolute; right:3px; bottom:4px; padding:2px 3px; background:rgba(0,0,0,.5); color:#FFFFFF; font-size:10px; font-weight:bold; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } ul#WN_youtube_gallery .thumb { width:100px; margin:2px; border:1px solid #000000; } |
JSON形式で取得が出来るサービスならいろいろつかえるかもしれませんね。
[…] https://developers.google.com/youtube/2.0/reference?hl=ja&csw=1#YouTube_elements_reference jQueryで指定ユーザーの最新のYoutube動画を表示する方法 | webOpixel jQueryを使ってyoutubeの特定ユーザーのチャンネルをリスト化してみる | キョウダケダカンナー YouTube Data APIで取得可能なフィード｜YouTubeAPI｜音声・動画配信（ストリーミング）｜PHP & JavaScript Room jQueryで、JSONで、YouTubeげっとする。 | NeGiMeMo.net […]