(1) JavaScript：直接使用內嵌YouTube Player的語法（於影片頁面點選分享 > 嵌入）
例. <iframe width="560" height="315" src="https://www.youtube.com/embed/影片id" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
(2) Playlist Show：用 Youtube Data API 的相關語法取得JSON碼（URL）
1. 到Google Developers Console建立專案並完成兩個動作：
(i) 點選側欄導覽選單>API和服務>資訊主頁，將YouTube Data API啟用
(ii) 點選側欄憑證功能建立新的金鑰。
2. 依據此網頁找到播放清單的JSON碼（URL）：Retrieve a user's playlists
(i) 在此網頁上的"forUsername"欄位內填入頻道名稱，即可得到channelId
(ii) 在此網頁上的"channelId"欄位輸入剛剛取得的id，並在結果中找想用的播放清單（title），即可取得播放清單序號
(iii) URL格式：https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails&playlistId=播放清單序號&key=自己的憑證金鑰&maxResults=50
3. 利用JSON Editor查看程式碼的意思
4. 程式碼（用來改寫）
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet,contentDetails&playlistId=播放清單序號&key=你自己的憑證金鑰&maxResults=50";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var data = arr.items;
var out = "";
var i;
for (i = 0; i < data.length; i++) {
out += '<img src="' + data[i].snippet.thumbnails.medium.url + '" />';
out += '<p><a href="https://youtu.be/' + data[i].snippet.resourceId.videoId + '" target="_blank">' + data[i].snippet.title + '</a></p>';
out += '<p> </p>';
}
document.getElementById("youtube-playlist").innerHTML = out;
}
</script>
</head>
<body>
<div id="youtube-playlist">
</div>
</body>
</html>
沒有留言:
張貼留言