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

Why use IFrame API

初めは、Data APIのplaylistItemsを使おうと思ってたんです。そしたら、すでに廃止済み(予定？)だったらしいです。(そうなら、Referenceから消てくれ～)
それで、いろいろ探した結果IFrame APIにたどり着きました。

つくったもの

AZKi Live Looper

推しのラジオのライブパートをループするページです。
動画下のボタンで何回目のラジオか選べます。
それだけ！

プレイヤーの設定

メインとなるjsは公式から4.までほぼコピペです。プレイヤーのサイズとかは適宜設定してください。

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

LiveData.json

{
	"contents":[
		{
			"video":"VIDEO_ID",
			"start":"2000",
			"end":"3060"
		},
        以下同様に作っていく
    ]
}

読み込みはjQuery(参考ページ)で

player.js

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

次に、公式の3.を以下のように書き換えました。

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を加えたことで、この中で各パラメータが設定できるのでstart(開始時間)とend(終了時間)を設定しました。両方とも動画の頭からの秒数を文字列で指定します。
これでとりあえず最初の動画が表示出来ます。

次の動画の読み込み

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

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はプレイヤーの再生ステータスが変化したときに実行され、プレイヤーが停止したときにcountをインクリメントしてloadVideoByIdで次の動画を読み込み再生します。

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

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

動画選択ボタン

オプションです。
ボタンを作って

index.html

<input type="button" value="#1" onclick="setLive(0)">

こんな感じで、loadVideoByIdで動画をロードさせるだけ

player.js

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

ソースコード