加油吧! Youtube君

觀察教學課程影片清單的觀看人次走向

by sj82516

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<h4>請輸入想要觀察的影片清單ID</h4>
<input id="playlistTitleId" type="text" value="PLXVfgk9fNX2I7tB6oIINGBmW50rrmFTqf">
<h4 id='playlistTitle'>Youtube影片清單</h4>
<canvas id="myChart" width="1200" height="400"></canvas>

JavaScript

const key = 'AIzaSyA9dn126LgbRvoViXhY1bBbZfzWZktJNjs';
// 影片ID可用：PLXVfgk9fNX2I7tB6oIINGBmW50rrmFTqf

// 取得播放清單的標題
function getYoutubePlaylistTitle(plId){
	return axios.get('https://www.googleapis.com/youtube/v3/playlists?'
                 + 'key='+key
                 + '&part=snippet'
                 + '&id='+ plId)
}

// 取得播放清單id中的所有影片資訊
// 回傳Promise，用then即可接一個包含所有影片資訊的陣列
function getYoutubeFullPlaylist(plId){
	let playlist = [];
    // 用遞迴輪詢全部的影片
	function recur(plId, nextPageToken){
    	return axios.get('https://www.googleapis.com/youtube/v3/playlistItems?'
				 + 'maxResults=10'
                 + '&key='+key
                 + '&part=snippet'
                 + '&playlistId='+ plId
                 + (nextPageToken?'&pageToken='+nextPageToken:''))
                 .then(result=>{
                 	if(result.data.nextPageToken){
                    	playlist = playlist.concat(result.data.items);
                    	return recur(plId, result.data.nextPageToken)
                    }else{
                    	console.log(result);
                    	playlist = playlist.concat(result.data.items);
                        return Promise.resolve(playlist)
                    }
                 })
    }
   	return recur(plId);
}

// 取得影片清單id中的所有影片的統計資料
// 回傳Promise，用then即可接一個包含所有影片資訊的陣列
function getVedioViewSum(vedioIdList){
	let promiseArr = [];
	while(vedioIdList.length!=0){
    	// 因為api一次最多吃50筆，要輪詢
    	let vedioIdListString = vedioIdList.splice(0,50).join(",");
        promiseArr.push(axios.get('https://www.googleapis.com/youtube/v3/videos?'
                + 'key=' + key
                + '&id=' + vedioIdListString
                + '&part=statistics,snippet'));
    }
    return promiseArr;
}

// 整理影片要儲存的資料
class Vedio {
	constructor(id, title, viewCount, likeCount){
    	this.id = id;
    	this.title = title;
        this.viewCount = viewCount;
        this.likeCount = likeCount;
    }
}

// 彙整函式，整合 
// 取得影片清單標題 -> 取得影片中的所有影片 -> 取得所有影片觀看人次 ->...