kaiser355/Youtube start

## Youtube start
<!DOCTYPE html>
<html>

<head>
    <title>オンライン研修用Youtube動画再生ツール</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />

    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
     <div class="alert alert-primary" role="alert">
            <h1>オンライン研修用動画再生ツール</h1>
     </div>


        <h2>使用する動画</h2>
        <div class="main-movie" id="player"></div>
        <form action="#" method="post">
            <p>再生開始時間<br>
                <input type="number" id="textForm1">分
                <input type="humber" id="textForm2">秒</p>
            <p><input type="button" value="記憶する" id="button"></p>
        </form>
        <label for="resultForm">計算結果: </label>
        <input type="text" id="resultForm">秒
            <div id="app">
                {{ message }}
            </div>


        <script>
            //1つ目の動画
            var tag = document.createElement('script');

            tag.src = "https://www.youtube.com/iframe_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            // 3. This function creates an <iframe> (and YouTube player)
            //    after the API code downloads.
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '360',
                    width: '640',
                    videoId: 'pg98GanHxFU',
                    playerVars: {
                        start: 2, // 動画再生の開始位置
                        end: 8 // 動画再生の終了位置
                    }
                });
            }
            var done = false;
                function onPlayerStateChange(event) {
                    if (event.data == YT.PlayerState.PLAYING && !done) {
                        setTimeout(stopVideo, 6000);
                        done = true;
                    }
                }

            function onPlayerReady(event) {
                event.target.playVideo();
            }
            function stopVideo() {
                player.stopVideo();
            }

            // フォームの動作
            // ボタンの要素を取得
            let button = document.getElementById("button");

            // ボタンをクリックした時の処理
            button.addEventListener("click", function (e) {

                e.preventDefault();

                // 2つの入力フォームの値を取得
                let textForm1 = document.getElementById("textForm1").value;
                let textForm2 = document.getElementById("textForm2").value;

                // 2つの数値を足す
                let sum1 = parseInt(textForm1, 10) * 60 + parseInt(textForm2, 10);

                // 足し算の結果を別の入力フォームに表示
                let resultForm = document.getElementById("resultForm");
                resultForm.value = sum1;

                const app = new Vue({
                    el: '#app',
                    data: {
                        message: '頭出し設定が完了しました',
                    },
                });
            });

        </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>オンライン研修用Youtube動画再生ツール</title>
	<!-- CSS only -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
	integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />

	<!-- JS, Popper.js, and jQuery -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
	integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
	crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
	integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
	crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
	integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
	crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	</head>

	<body>
	<div class="alert alert-primary" role="alert">
	<h1>オンライン研修用動画再生ツール</h1>
	</div>


	<h2>使用する動画</h2>
	<div class="main-movie" id="player"></div>
	<form action="#" method="post">
	<p>再生開始時間<br>
	<input type="number" id="textForm1">分
	<input type="humber" id="textForm2">秒</p>
	<p><input type="button" value="記憶する" id="button"></p>
	</form>
	<label for="resultForm">計算結果: </label>
	<input type="text" id="resultForm">秒
	<div id="app">
	{{ message }}
	</div>


	<script>
	//1つ目の動画
	var tag = document.createElement('script');

	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	// 3. This function creates an <iframe> (and YouTube player)
	// after the API code downloads.
	var player;
	function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	height: '360',
	width: '640',
	videoId: 'pg98GanHxFU',
	playerVars: {
	start: 2, // 動画再生の開始位置
	end: 8 // 動画再生の終了位置
	}
	});
	}
	var done = false;
	function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING && !done) {
	setTimeout(stopVideo, 6000);
	done = true;
	}
	}

	function onPlayerReady(event) {
	event.target.playVideo();
	}
	function stopVideo() {
	player.stopVideo();
	}

	// フォームの動作
	// ボタンの要素を取得
	let button = document.getElementById("button");

	// ボタンをクリックした時の処理
	button.addEventListener("click", function (e) {

	e.preventDefault();

	// 2つの入力フォームの値を取得
	let textForm1 = document.getElementById("textForm1").value;
	let textForm2 = document.getElementById("textForm2").value;

	// 2つの数値を足す
	let sum1 = parseInt(textForm1, 10) * 60 + parseInt(textForm2, 10);

	// 足し算の結果を別の入力フォームに表示
	let resultForm = document.getElementById("resultForm");
	resultForm.value = sum1;

	const app = new Vue({
	el: '#app',
	data: {
	message: '頭出し設定が完了しました',
	},
	});
	});

	</script>
	</body>

	</html>