YouTubeで再生範囲指定したプレイリスト的なものを作った

#Why use IFrame API
初めは、Data APIのplaylistItemsを使おうと思ってたんです。そしたら、すでに[廃止済み](https://developers.google.com/youtube/v3/revision_history#november-2-2016)(予定？)だったらしいです。(そうなら、Referenceから消てくれ～)
それで、いろいろ探した結果[IFrame API](https://developers.google.com/youtube/iframe_api_reference?hl=ja)にたどり着きました。
#つくったもの
###[AZKi Live Looper](https://tkg-tamagohan.github.io/AZKiLiveLooper/)
推しのラジオのライブパートをループするページです。
動画下のボタンで何回目のラジオか選べます。
それだけ！

#プレイヤーの設定
メインとなるjsは[公式](https://developers.google.com/youtube/iframe_api_reference#Getting_Started)から4.までほぼコピペです。プレイヤーのサイズとかは適宜設定してください。

それと、動画のIDと開始時間、終了時間が必要なので次のようなjsonファイルを用意しました。

```json:LiveData.json
{
	"contents":[
		{
			"video":"VIDEO_ID",
			"start":"2000",
			"end":"3060"
		},
        以下同様に作っていく
    ]
}
```
読み込みはjQuery([参考ページ](https://macoblog.com/jquery_read_json/))で

```js:player.js
var liveData = [];
$.getJSON('./LiveData.json', function (data) {
	liveData = data['contents'];
});
```

次に、[公式](https://developers.google.com/youtube/iframe_api_reference#Getting_Started)の[3.](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)を以下のように書き換えました。

```js:LiveData.js
var player;
var count = 0;

function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		videoId: liveData[count].video,
        //変更箇所
		playerVars: {
			start: liveData[count].start,
			end: liveData[count].end
		},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}
```

変更点は、[`playerVars`](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)を加えたことで、この中で[各パラメータ](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters)が設定できるので[`start`](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#start)(開始時間)と[`end`](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#end)(終了時間)を設定しました。両方とも動画の頭からの秒数を**文字列**で指定します。
これでとりあえず最初の動画が表示出来ます。

#次の動画の読み込み
プレイヤーで動画の再生が終了したときに次の動画を読み込めるように、次のような`onPlayerStateChange`を定義します。

```js:player.js
var done = false;
function onPlayerStateChange(event) {
	if (event.data == 0 && !done) {
		count += 1;
		done = true;
		if (!(count < liveData.length)) {
			count = 0;
		}

		player.loadVideoById({
			videoId: liveData[count].video,
			startSeconds: Number(liveData[count].start),
			endSeconds: Number(liveData[count].end)
		});
	} else
	if (event.data == 1 && done) {
		done = false;
	}
}
```
`onPlayerStateChange`はプレイヤーの[再生ステータス](https://developers.google.com/youtube/iframe_api_reference#Playback_status)が変化したときに実行され、プレイヤーが停止したときに`count`をインクリメントして[`loadVideoById`](https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions)で次の動画を読み込み再生します。

変数`done`は動画再生中は`false`、次の動画の読み込み中に`true`となります。これがないと`count`が2回インクリメントされてしまったりします。

これでお気に入り部分の垂れ流しができました。

#動画選択ボタン
オプションです。
ボタンを作って

```html:index.html
<input type="button" value="#1" onclick="setLive(0)">
```

こんな感じで、[`loadVideoById`](https://developers.google.com/youtube/iframe_api_reference#Queueing_Functions)で動画をロードさせるだけ

```js:player.js
var setLive = function (Num) {
	count = Num;
	player.loadVideoById({
		videoId: liveData[count].video,
		startSeconds: Number(liveData[count].start),
		endSeconds: Number(liveData[count].end)
	});
```

#ソースコード
https://github.com/Tkg-tamagohan/AZKiLiveLooper