Visualizzare una playlist di YouTube

JavaScriptCopia

// inizializzo l'API
        gapi.load("client", function () {
            // imposto le credenziali per l'accesso all'api DA SOSTITUIRE CON UNO VALIDO
            gapi.client.setApiKey("AIzaSyA5k6R6PzPdBrnm5o-nZFfnOrPtDGARGvc");
            // carico la libreria
            return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
                .then(function () {
                    // libreria caricata
                    // adesso posso invocare le api che mi servono
                    invokeGapiClientApi();
                },
                    function (err) { console.error("Error loading GAPI client for API", err); });
        });

        // START: carico la playlist
        function invokeGapiClientApi() {
            // variabili di configurazione
            var palceholderId = "sgart-youtube-playlist";
            var playlistId = "PLeBOnJnVrSPVYe_1QqQKF5kcnDMxcNc6z";
            var maxResults = 3;
            var showPlayer = true;
            loadPlaylist(playlistId, maxResults, palceholderId, showPlayer);
        }

        function loadPlaylist(playlistId, maxResults, palceholderId, showPlayer) {
            return gapi.client.youtube.playlistItems.list({
                "part": "snippet,contentDetails",
                "maxResults": maxResults,
                "playlistId": playlistId
            })
                .then(function (response) {
                    if (showPlayer === true) {
                        // carico il player per ogni singolo elemento della play list
                        loadVideoPlayers(response.result.items, maxResults, palceholderId, 90);
                    } else {
                        // visualizzo solo le immagini di anteprima
                        addPlayList(response.result.items, palceholderId);
                    }
                },
                    function (err) { console.error("Execute error loadPlaylist", err); });
        }

        // visualizzo la playlist in pagina
        function addPlayList(items, palceholderId) {
            var s = "<ul class=\"play-list\">";
            items.forEach(function (item) {
                var snippet = item.snippet;
                var videoId = item.contentDetails.videoId;
                var title = snippet.title;
                var player = item.embedHtml || "<img src=\"" + snippet.thumbnails.default.url + "\" alt=\"" + title + "\">";
                s += "<li>"
                    + player
                    + "<div class=\"container\">"
                    + "<a href=\"https://www.youtube.com/watch?v=" + videoId + "\" target=\"_blank\">" + title + "</a>"
                    + "</div>"
                    + "</li>";

            });
            s += "</ul>";
            document.getElementById(palceholderId).innerHTML = s;
        }

        function loadVideoPlayers(items, maxResults, palceholderId, maxHeight) {
            var videoIds = "";
            // concateno gli id dei video di cui mi serve il player
            items.forEach(function (item) {
                videoIds += item.contentDetails.videoId + ",";
            });

            // faccio la chiamata per avere il codice del palyer
            return gapi.client.youtube.videos.list({
                "part": "player",
                "maxResults": maxResults,
                "maxHeight": maxHeight,
                "id": videoIds
            })
                .then(function (response) {
                    // per ogni elemento aggiuingo una nuov proprietà per il palyer
                    items.forEach(function (item) {
                        //cerco il video
                        var found = response.result.items.find(function (v) {
                            return item.contentDetails.videoId === v.id;
                        });
                        if (found) {
                            var s = found.player.embedHtml;
                            // se serve, cambio la larghezza e la imposto al 100%
                            //s = s.replace(/width="\d+\"/i, "width=\"100%\"");
                            item.embedHtml = s;
                        }
                    });
                    addPlayList(items, palceholderId)

                },
                    function (err) { console.error("Execute error", err); });
        }