下記参考サイトを元に、youtubeのチャンネルIDを指定して、チャンネル内の最新3つの動画をiframeで出力したいのですが、for文の記述方法がわからず困っています。
<script> $(function() { //step1:uploadsのplaylistIdの取得を試みる $.ajax( { "timeout": 5000, "url": "https://www.googleapis.com/youtube/v3/channels", "type": "GET", "dataType": "jsonp", "data": { "part": "contentDetails", "key": "APIキー", "id": "チャンネルID", }, "success": function(res) { if(!res || !res.items || !res.items[0] || !res.items[0].contentDetails || !res.items[0].contentDetails.relatedPlaylists || !res.items[0].contentDetails.relatedPlaylists.uploads) { //error処理 alert("error!"); return ""; } var playlistId = res.items[0].contentDetails.relatedPlaylists.uploads; //step2:uploadsのplaylistIdが動画リストを取得する $.ajax( { "timeout": 5000, "url": "https://www.googleapis.com/youtube/v3/playlistItems", "type": "GET", "dataType": "jsonp", "data": { "part": "snippet", "key": "APIキー", "playlistId": playlistId, "maxResults": 3 }, "success": function(res) { if(!res || !res.items || !res.items[0] || !res.items[0].snippet || !res.items[0].snippet.resourceId || !res.items[0].snippet.resourceId.videoId) { //error処理 alert("error!"); return ""; } var videoIds = []; for(var i = 0; i < res.items.length; i++) { var id = res.items[i].snippet.resourceId.videoId; if($.inArray(id, videoIds) != -1) { continue; } videoIds.push(id); document.write('<iframe src="http://www.youtube.com/embed/' + videoIds + '"></iframe>'); } //videoIdsの取得成功 // alert(videoIds.join("\n") ); // alert('<iframe src="http://www.youtube.com/embed/' + videoIds + '"></iframe>'); //document.write(videoIds); }, "error": function(res, status) { //error処理 alert("error!"); return ""; } } ); }, "error": function(res, status) { //error処理 alert("error!"); return ""; } } ); }); </script>
問題は以下の部分です。
var videoIds = []; for(var i = 0; i < res.items.length; i++) { var id = res.items[i].snippet.resourceId.videoId; if($.inArray(id, videoIds) != -1) { continue; } videoIds.push(id); document.write('<iframe src="http://www.youtube.com/embed/' + videoIds + '"></iframe>'); }
上記コードですと、以下のように動画IDがプラスされる形で出力されてしまいます。
<iframe src="http://www.youtube.com/embed/動画ID1"></iframe> <iframe src="http://www.youtube.com/embed/動画ID1,動画ID2"></iframe> <iframe src="http://www.youtube.com/embed/動画ID1,動画ID2,動画ID3"></iframe>これを以下のように一つ一つIDが出力されるようにfor文を修正したいのですが、方法がわかりません。
<iframe src="http://www.youtube.com/embed/動画ID1"></iframe> <iframe src="http://www.youtube.com/embed/動画ID2"></iframe> <iframe src="http://www.youtube.com/embed/動画ID3"></iframe>どなたか方法を教えていただけないでしょうか。
宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/11 08:44