Youtube Api - Youtube video linkek a weblapon
2019-07-26T09:36:46+02:00
2019-07-26T13:03:58+02:00
2022-07-19T00:30:46+02:00
Athlonator
Sziasztok!
Nem igazán vagyok jártas a Javascript-ben, de néha előveszem, és akkor pattogok rajta, mint majom a köszörűkövön.
Vagy egy youtube oldal, és egy hozzá tartozó playlist, amit szeretnék a weboldalamba betölteni,. Ezek az oldalamra linkként, kis képek, és a hozzájuk tartozó címekkel töltődnek be. (kis kivétellel).
Beállítom mondjuk, hogy csak 4 db video linket szeretnék elhelyezni az oldalamon, és az első négy be is töltődik, csak sajnos ez megismétlődik mégegyszer, tehát 8 link jelenik meg, ugy hogy az 4.től még egyszer ugyanaz a 4 Ezt a duplikációt szeretném valahogy kiiktatni, és kérni a segítségeteket, amit előre is köszönök!

Tehát a kód:

Javascript:

$(document).ready(function () { var key = 'Valami'; var playlistId = 'PLJiGI-KZnz3TRgtM9JO3_zzRVEBOUAkHJ'; var URL = 'https://www.googleapis.com/youtube/v3/playlistItems'; var options = { part: 'snippet', key: key, maxResults: 4, playlistId: playlistId } loadVids(); function loadVids(id) { $.getJSON(URL, options, function (data) { var id = data.items[0].snippet.resourceId.videoId; mainVid(id); resultsLoop(data); }); } function mainVid(id) { $('#video').html(``); } function resultsLoop(data) { $.each(data.items, function (i, item) { var thumb = item.snippet.thumbnails.medium.url; var title = item.snippet.title; var desc = item.snippet.description.substring(0, 100); var vid = item.snippet.resourceId.videoId; var thumb_url = item.snippet.thumbnails.medium.url; var youtubeUrl = "https://www.youtube.com/watch?v=" + vid; $('main').append(` <article class="item" data-key="${vid}"> <img src="${thumb}" alt="" class="thumb"> <div class="details"> <a href="${youtubeUrl}" target="_blank "> <h4>${title}</h4> </a> <p>${desc}</p> </div> </article> `); }); } });
Css: (A sok taéalítás miatt kacifántos felesleges részekkel)

@mixin font-base { padding: 0; margin: 0; line-height: 1.3; font-weight: 600; } h4 { @include font-base; } p { padding-top:5px; @include font-base; color: grey; font-size: 0.7rem; } body { background-color: #eee; } header, section { position: fixed; text-align: center; width: 560px; background-color: #fff; } section { top: 00px; } main { width:400px; padding: 0px 10px 0px; } article { display: flex; align-items: center; padding: 8px 2px; border: 2px solid white; border-radius: 8px; margin: 0 auto; &:hover { border: 2px solid #ff9999; } } .thumb { height: 100px; border-radius: 4px; } .details { width:200px; padding: 8px 10px; } html <main> </main>
Mutasd a teljes hozzászólást!

  • Szia!



    $(document).ready(function(){ // oldal betöltése után futó kód loadVids(); });
    részbe nem szerencsés eljárásokat deklarálni, ott csak meghívni kellene.
    Gyakorlatilag az egész document readyben lévő részt kiveheted és elé rakhatod a loadVids() hívás kivételével valahogy így:

    var key = 'Valami'; var playlistId = 'PLJiGI-KZnz3TRgtM9JO3_zzRVEBOUAkHJ'; var URL = 'https://www.googleapis.com/youtube/v3/playlistItems'; var options = { part: 'snippet', key: key, maxResults: 4, playlistId: playlistId } function loadVids(id) { $.getJSON(URL, options, function (data) { var id = data.items[0].snippet.resourceId.videoId; mainVid(id); resultsLoop(data); }); } function mainVid(id) { $('#video').html(``); } function resultsLoop(data) { $.each(data.items, function (i, item) { var thumb = item.snippet.thumbnails.medium.url; var title = item.snippet.title; var desc = item.snippet.description.substring(0, 100); var vid = item.snippet.resourceId.videoId; var thumb_url = item.snippet.thumbnails.medium.url; var youtubeUrl = "https://www.youtube.com/watch?v=" + vid; $('main').append(` <article class="item" data-key="${vid}"> <img src="${thumb}" alt="" class="thumb"> <div class="details"> <a href="${youtubeUrl}" target="_blank "> <h4>${title}</h4> </a> <p>${desc}</p> </div> </article> `); }); } $(document).ready(function(){ loadVids(); });
    Logolásra használhatod a console.log('üzenet'); -et.
    Mutasd a teljes hozzászólást!
  • Köszönöm a választ, de sajnos még mindig duplikál.
    Mutasd a teljes hozzászólást!
  • Igen, kipróbálni sajnos most nem tudom. Ezért írtam, hogy logolni kellene a futást. A loadVids és a resultsLoop function-okba érdemes tenni egy pár console logot valahogy így (a java console logot a böngészőben az f12-vel tudod megnézni) :

    function loadVids(id) { console.log('loadVids begin'); $.getJSON(URL, options, function (data) { console.log(data); var id = data.items[0].snippet.resourceId.videoId; mainVid(id); resultsLoop(data); }); } function mainVid(id) { $('#video').html(``); } function resultsLoop(data) { console.log('resultLoop begin'); $.each(data.items, function (i, item) { var thumb = item.snippet.thumbnails.medium.url; var title = item.snippet.title; var desc = item.snippet.description.substring(0, 100); var vid = item.snippet.resourceId.videoId; var thumb_url = item.snippet.thumbnails.medium.url; var youtubeUrl = "https://www.youtube.com/watch?v=" + vid; console.log('append: '+vid); $('main').append(` <article class="item" data-key="${vid}"> <img src="${thumb}" alt="" class="thumb"> <div class="details"> <a href="${youtubeUrl}" target="_blank "> <h4>${title}</h4> </a> <p>${desc}</p> </div> </article> `); }); }
    Mutasd a teljes hozzászólást!
  • Ez a hibát dobja. Ebben benne van az eredi API code, és Playlist is. 

    etag: ""Bdx4f4ps3xCOOo1WZ91nTLkRZ_c/0xm4EusI3jZIz3eBMd12wDBe1Uo"" ​ items: Array(4) [ {…}, {…}, {…}, … ] ​ kind: "youtube#playlistItemListResponse" ​ nextPageToken: "CAQQAA" ​ pageInfo: Object { totalResults: 24, resultsPerPage: 4 } ​ <prototype>: Object { … } youtube_api.js:17:11 resultLoop begin youtube_api.js:30:12 append: pBef_Oda7OQ youtube_api.js:38:12 append: mZHKNKO-sxo youtube_api.js:38:12 append: Aw1bwwte_3k youtube_api.js:38:12 append: jV7k-bDRptE youtube_api.js:38:12 Object { kind: "youtube#playlistItemListResponse", etag: ""Bdx4f4ps3xCOOo1WZ91nTLkRZ_c/Bq8cQ9v1Vhz8EiRSkJTerxbZenA"", nextPageToken: "CAQQAA", pageInfo: {…}, items: (4) […] } youtube_api.js:17:11 resultLoop begin youtube_api.js:30:12 append: pBef_Oda7OQ youtube_api.js:38:12 append: mZHKNKO-sxo youtube_api.js:38:12 append: Aw1bwwte_3k youtube_api.js:38:12 append: jV7k-bDRptE
    Mutasd a teljes hozzászólást!
  • Ha csak az elem számát adom meg, hogy csak azt az egyet jelenítse meg, azt is duplikálja. 

    var key = 'AIzaSyAg5Hg8gC1n5Wp7wwyo6VlGnBvLA4pQUXo'; var playlistId = 'PL2IBLJiI5V17xuqv-Za7JHcuJwaoNSsry'; var URL = 'https://www.googleapis.com/youtube/v3/playlistItems'; var options = { part: 'snippet', key: key, maxResults: 2, playlistId: playlistId } function loadVids(id2) { $.getJSON(URL, options, function (data) { var thumb = data.items[1].snippet.thumbnails.medium.url; var title = data.items[1].snippet.title; var desc = data.items[1].snippet.description.substring(0, 100); var vid = data.items[1].snippet.resourceId.videoId; var youtubeUrl = "https://www.youtube.com/watch?v=" + vid; console.log('append: '+vid); $('main').append(` <article data-key="${vid}"> <img src="${thumb}" alt="" class="thumb"> <div class="details"> <a href="${youtubeUrl}" target="_blank "> <h4>${title}</h4> </a> <p>${desc}</p> </div> </article> `); }); } $(document).ready(function(){ loadVids(); });
    Mutasd a teljes hozzászólást!
  • Az egész HTML - t illeszd ide. Ez tipikusan valami alap banális hibának tűnik, ami felett csak elsiklottál. Mint pl.: hogy 2-szer van mondjuk a js behúzva a HTML - be
    Mutasd a teljes hozzászólást!
  • Bakker! 2x volt behúzva a html kódva. nem hiszem el! :D
    Mutasd a teljes hozzászólást!
abcd