More than 3 years have passed since last update.

チャンネルの動画を古い順で再生

Last updated at 2021-05-10Posted at 2021-05-10

test.html

<html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
	
/*

console.log(
	ytInitialData.contents.twoColumnBrowseResultsRenderer.tabs[1]
	.tabRenderer.content.sectionListRenderer.contents[0]
	.itemSectionRenderer.contents[0]
	.gridRenderer.items.map(v=>{
		var r = v.gridVideoRenderer
		return r.videoId+','+r.title.runs[0].text
	}).join("\n")
)

*/

var s = `

FxjWWtdw4Hw,サンプルですよ
5tpHkvQ30Sg,マイクラB2J｜Java版もゲームパッドで遊びたい！実用アプリ自作・後編
TO6KsmQIGL0,マイクラB2J｜Java版もゲームパッドで遊びたい！実用アプリ自作・前編
0iNRtSDcJjQ,マイクラB2J｜iPhoneのワールドで遊びたい！！！
mPE_qROWQLQ,マイクラB2J｜Java版もゲームパッドで遊びたい・外伝
8X_lRF9z08A,マイクラB2J｜統合版のワールドで遊びたい！！！
sKCzh3Tthxk,マイクラB2J｜Java版も寝ころがって遊びたい！！！
xGlVax-Y8fM,マイクラB2J｜いっちゃんキレイなマイクラください！！！

`
var data = s.trim().split("\n").map(t=>t.split(','))

$(e=>{
	$('body').append(
		$('<div id="player">'),
		data.map(a=>$('<div>').attr('data-id',a[0]).append(a[1]))
	)
	$('[data-id]').click(e=>{
		location.hash = e.target.dataset.id
	})

	var id = location.hash.slice(1)||$('[data-id]')[0].dataset.id
	$('[data-id='+id+']').addClass('on')
	location.hash = id

	$('head').append(
		$('<script>').attr('src','https://www.youtube.com/iframe_api')
	)
})

function onYouTubeIframeAPIReady() {
	var p = new YT.Player('player', {
		width:'100%',height:400,
		videoId:location.hash.slice(1),
		events:{
			onReady(e){e.target.playVideo()},
			onStateChange(e){
				if (e.data ==YT.PlayerState.ENDED) {
					var q = $('div[data-id="'+location.hash.slice(1)+'"]').next()
					if(q.length>0) location.hash = q[0].dataset.id
				}
			}
		}
	})
	window.onhashchange = e=>{
		var s = location.hash.slice(1)
		$('[data-id]').removeClass()
		$('[data-id='+s+']').addClass('on')
		p.loadVideoById(s)
	}
}

</script>
<style>

div{line-height:40px;border-bottom:1px solid #eee;}
.on{background:#eee;}

</style>
</head>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up