Tramite le
API di
YouTube è possibile integrare una
playlist in una pagina
html con una aspetto
personalizzato.
Prima di utilizzare le
API è necessario avere un account
Google e creare un nuovo progetto per ottenere una chiave.
La chiave può essere ottenuta tramite la pagina
Google APIs, prima cosa creare un nuovo progetto ed aasegnargli un nome
elenco progetti nuovo progetto poi cercare l'API
YouTube Data API v3aggiungi API cerca API e abilitarla
abilita API infine creare le credenziali
aggiungi credenziali API selezionando
YouTube Data API v3,
Browser web (JavaScript),
Dati pubblici e generare le credenziali cliccando sul pulsante
Di quali credenziali hai bisogno?aggiungi credenziali API copiare la stringa appena generata, andrà inserita nel codice
JavaScript (
gapi.client.setApiKey(...))
aggiungi credenziali API eventualmente si possono aggiungere altre restrizioni come ad esempio se limitare l'accesso solo alle chiamate che arrivano da un determinato
HTTP referer.
Il codice
html di esempio è questo:
<!DOCTYPE html>
<html>
<head>
<title>Playlist YouTube - Sgart.it</title>
<style>
.play-list { display: block; list-style: none; margin: 0;padding: 0; }
.play-list li { display: flex; flex-direction: row; margin-bottom: 5px; background-color: #ddd; padding: 10px; }
.play-list img, .play-list iframe { margin-right: 10px; }
</style>
</head>
<body>
<!-- palceholder dove verra inserita la playlist -->
<div id="sgart-youtube-playlist">Loading play list ...</div>
<!-- libreria API di Google -->
<script src="https://apis.google.com/js/api.js"></script>
<script>... inserire il codice javascript successivo...</script>
</body>
</html>
codice
JavaScript// 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); });
}
Il codice, prima carica l'API (
gapi.load), una volta caricata invoca la funzione per caricare la playlist (
invokeGapiClientApi) che usa l'API
gapi.client.youtube.playlistItems.list.
L'esempio può visualizzare o l'immagine di anteprima del video, oppure il player completo (vedi variabile
showPlayer) in questo caso fa una seconda chiamata all'API
gapi.client.youtube.videos.list.
L'ultima cosa da impostare è l'id della playlist (variabile
playlistId) che può essere ricavato dalla querystring della pagina, parametro
list:
playlist Link utili:
google-api-javascript-client e
Code Samples