2RiniaR/WorkTube.html

## WorkTube.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>WorkTube</title>
        <!-- Read API script twice to void origin error -->
        <script src="https://www.youtube.com/iframe_api"></script>
        <script src="https://www.youtube.com/iframe_api"></script>
        <script>
            var youtubePlayers = [];
            var playerIndex = 0;

            // URLの文字列からクエリパラメータを取得する
            function getParam(key, url) {
                if (!url) url = window.location.href;
                var name = key.replace(/[\[\]]/g, "\\$&");
                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, " "));
            }

            // IframeAPIのインスタンスを生成し、配列の末尾に追加
            function CreateIframe(index, videoId) {
                var player = new YT.Player('video-player-' + index, {
                    'width': '480',
                    'height': '360',
                    'videoId': videoId,
                    'playerVars': {
                        loop: 1,     // 自動ループを行う
                        //autoplay: 1, // 自動再生を行う
                        rel: 0,      // 関連動画に同じチャンネルの動画のみを表示させる
                        vq: 'small', // 画質を240pに固定
                        fs: 0,       // フルスクリーンモードボタンを非表示にする
                        start: 0,    // 動画開始位置を0秒にする
                        enablejsapi: 1, // スクリプトからIframeを制御できるようにする
                        playsinline: 1,  // iOS上で全画面再生されなくなる
                        iv_load_policy: 3,  // アノテーションを非表示にする
                        disablekb: 0,  // キーボード操作を無効化する
                    },
                    'events': {
                        'onReady': event => {
                            event.target.playVideo();
                        }
                    }
                });
                youtubePlayers.push({
                    'player': player,
                    'id': index
                });
            }

            function deleteAllVideos() {
                youtubePlayers.forEach(playerObj => {
                    playerObj.player.destroy();
                });
                youtubePlayers = [];
                document.getElementById('link-inputs').textContent = null;
            }

            function deleteVideo(element) {
                var playerObj = youtubePlayers.find(obj => obj.id == element.dataset.index);
                if(playerObj) playerObj.player.destroy();
                youtubePlayers = youtubePlayers.filter(obj => obj.id != playerObj.id);
                var inputElement = document.getElementById('link-input-' + element.dataset.index);
                inputElement.parentNode.removeChild(inputElement);
            }

            function addVideoTextInput() {
                const linkInputElement = ''
                    + '<li class="link-input" id="link-input-' + playerIndex + '">'
                    + '<input id="link-text-' + playerIndex + '" data-index="' + playerIndex +'" type="text" class="link-text">'
                    + '<input id="delete-button-' + playerIndex + '" data-index="' + playerIndex +'" type="button" class="delete-button" value="削除" onclick="deleteVideo(this)">'
                    + '</li>';
                playerIndex++;
                document.getElementById('link-inputs').insertAdjacentHTML('beforeend', linkInputElement);
            }

            function pauseAllVideos() {
                youtubePlayers.forEach(playerObj => {
                    playerObj.player.pauseVideo();
                });
            }

            function playAllVideos() {
                var linkTexts = Array.prototype.slice.call(document.getElementsByClassName("link-text"));
                linkTexts.forEach(input => {
                    var playerObj = youtubePlayers.find(obj => obj.id == input.dataset.index);
                    var videoID = getParam('v', input.value)
                    if (!playerObj) {
                        document.getElementById('movies-wrapper').insertAdjacentHTML('beforeend', '<div id="video-player-' + input.dataset.index + '"></div>');
                        CreateIframe(input.dataset.index, videoID);
                        return;
                    }
                    if (playerObj.player.getVideoData().video_id != videoID) {
                        playerObj.player.destroy();
                        CreateIframe(Number(input.dataset.index), videoID);
                    }
                    playerObj.player.playVideo();
                })
            }
        </script>
    </head>
    <body>
        <h1>WorkTube</h1>
        <input type="button" id="add-button" value="枠を追加" onclick="addVideoTextInput()">
        <input type="button" id="delete-all-button" value="全動画を削除" onclick="deleteAllVideos()">
        <ul id="link-inputs"></ul>
        <input type="button" id="pause-all-button" value="全動画を一時停止" onclick="pauseAllVideos()">
        <input type="button" id="play-all-button" value="全動画を再生" onclick="playAllVideos()">
        <div id="movies-wrapper"></div>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>WorkTube</title>
	<!-- Read API script twice to void origin error -->
	<script src="https://www.youtube.com/iframe_api"></script>
	<script src="https://www.youtube.com/iframe_api"></script>
	<script>
	var youtubePlayers = [];
	var playerIndex = 0;

	// URLの文字列からクエリパラメータを取得する
	function getParam(key, url) {
	if (!url) url = window.location.href;
	var name = key.replace(/[\[\]]/g, "\\$&");
	var regex = new RegExp("[?&]" + name + "(=([^&#]*)\|&\|#\|$)"),
	results = regex.exec(url);
	if (!results) return null;
	if (!results[2]) return '';
	return decodeURIComponent(results[2].replace(/\+/g, " "));
	}

	// IframeAPIのインスタンスを生成し、配列の末尾に追加
	function CreateIframe(index, videoId) {
	var player = new YT.Player('video-player-' + index, {
	'width': '480',
	'height': '360',
	'videoId': videoId,
	'playerVars': {
	loop: 1, // 自動ループを行う
	//autoplay: 1, // 自動再生を行う
	rel: 0, // 関連動画に同じチャンネルの動画のみを表示させる
	vq: 'small', // 画質を240pに固定
	fs: 0, // フルスクリーンモードボタンを非表示にする
	start: 0, // 動画開始位置を0秒にする
	enablejsapi: 1, // スクリプトからIframeを制御できるようにする
	playsinline: 1, // iOS上で全画面再生されなくなる
	iv_load_policy: 3, // アノテーションを非表示にする
	disablekb: 0, // キーボード操作を無効化する
	},
	'events': {
	'onReady': event => {
	event.target.playVideo();
	}
	}
	});
	youtubePlayers.push({
	'player': player,
	'id': index
	});
	}

	function deleteAllVideos() {
	youtubePlayers.forEach(playerObj => {
	playerObj.player.destroy();
	});
	youtubePlayers = [];
	document.getElementById('link-inputs').textContent = null;
	}

	function deleteVideo(element) {
	var playerObj = youtubePlayers.find(obj => obj.id == element.dataset.index);
	if(playerObj) playerObj.player.destroy();
	youtubePlayers = youtubePlayers.filter(obj => obj.id != playerObj.id);
	var inputElement = document.getElementById('link-input-' + element.dataset.index);
	inputElement.parentNode.removeChild(inputElement);
	}

	function addVideoTextInput() {
	const linkInputElement = ''
	+ '<li class="link-input" id="link-input-' + playerIndex + '">'
	+ '<input id="link-text-' + playerIndex + '" data-index="' + playerIndex +'" type="text" class="link-text">'
	+ '<input id="delete-button-' + playerIndex + '" data-index="' + playerIndex +'" type="button" class="delete-button" value="削除" onclick="deleteVideo(this)">'
	+ '</li>';
	playerIndex++;
	document.getElementById('link-inputs').insertAdjacentHTML('beforeend', linkInputElement);
	}

	function pauseAllVideos() {
	youtubePlayers.forEach(playerObj => {
	playerObj.player.pauseVideo();
	});
	}

	function playAllVideos() {
	var linkTexts = Array.prototype.slice.call(document.getElementsByClassName("link-text"));
	linkTexts.forEach(input => {
	var playerObj = youtubePlayers.find(obj => obj.id == input.dataset.index);
	var videoID = getParam('v', input.value)
	if (!playerObj) {
	document.getElementById('movies-wrapper').insertAdjacentHTML('beforeend', '<div id="video-player-' + input.dataset.index + '"></div>');
	CreateIframe(input.dataset.index, videoID);
	return;
	}
	if (playerObj.player.getVideoData().video_id != videoID) {
	playerObj.player.destroy();
	CreateIframe(Number(input.dataset.index), videoID);
	}
	playerObj.player.playVideo();
	})
	}
	</script>
	</head>
	<body>
	<h1>WorkTube</h1>
	<input type="button" id="add-button" value="枠を追加" onclick="addVideoTextInput()">
	<input type="button" id="delete-all-button" value="全動画を削除" onclick="deleteAllVideos()">
	<ul id="link-inputs"></ul>
	<input type="button" id="pause-all-button" value="全動画を一時停止" onclick="pauseAllVideos()">
	<input type="button" id="play-all-button" value="全動画を再生" onclick="playAllVideos()">
	<div id="movies-wrapper"></div>
	</body>
	</html>