Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

Radio-Exercise_No.1 / index.html

soiz1

Update index.html

4292da4 verified about 1 month ago

raw

history blame

4.26 kB

	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>動画プレイヤー</title>
	<style>
	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f0f0f0;
	font-family: sans-serif;
	padding: 20px;
	}
	video {
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
	}
	.controls {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	max-width: 500px;
	}
	.control-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	}
	input[type="range"] {
	flex: 1;
	}
	input[type="number"] {
	width: 60px;
	}
	</style>
	</head>
	<body>
	<h1>ラジオ体操動画プレイヤー<br>For Kushihara</h1>

	<div class="control-group">
	<label for="videoSelect">動画の音量を選択：</label>
	<select id="videoSelect">
	<option value="v.mp4">通常音量</option>
	<option value="v-2.mp4">大音量</option>
	</select>
	</div>

	<video id="videoPlayer" src="v.mp4" controls></video>

	<div class="controls">
	<div class="control-group">
	<label for="speedRange">再生速度：</label>
	<input type="range" id="speedRange" min="0.0001" max="5" step="0.0001" value="1">
	<input type="number" id="speedInput" min="0.0001" step="0.0001" value="1">
	</div>

	<div class="control-group">
	<label for="volumeRange">音量：</label>
	<input type="range" id="volumeRange" min="0" max="1" step="0.01" value="1">
	<input type="number" id="volumeInput" min="0" max="1" step="0.01" value="1">
	</div>

	<div class="control-group">
	<label for="loopCheckbox">ループ再生：</label>
	<input type="checkbox" id="loopCheckbox" checked>
	</div>

	<button onclick="goFullscreen()">全画面</button>
	</div>

	<script>
	const video = document.getElementById('videoPlayer');
	const videoSelect = document.getElementById('videoSelect');
	const speedRange = document.getElementById('speedRange');
	const speedInput = document.getElementById('speedInput');
	const volumeRange = document.getElementById('volumeRange');
	const volumeInput = document.getElementById('volumeInput');
	const loopCheckbox = document.getElementById('loopCheckbox');

	function updatePlaybackRate(value) {
	const speed = parseFloat(value);
	speedInput.value = speed;
	speedRange.value = speed;
	video.playbackRate = speed;
	}

	function updateVolume(value) {
	const volume = parseFloat(value);
	volumeInput.value = volume;
	volumeRange.value = volume;
	video.volume = volume;
	}

	function handleVideoChange() {
	const selected = videoSelect.value;

	if (selected === 'v-2.mp4') {
	const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
	if (!confirmPlay) {
	videoSelect.value = video.src.split('/').pop(); // 元に戻す
	return;
	}
	}

	video.src = selected;
	video.load();
	video.play();
	}

	videoSelect.addEventListener('change', handleVideoChange);

	['input', 'change', 'mouseup'].forEach(eventName => {
	speedRange.addEventListener(eventName, () => updatePlaybackRate(speedRange.value));
	volumeRange.addEventListener(eventName, () => updateVolume(volumeRange.value));
	});

	speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value));
	volumeInput.addEventListener('input', () => updateVolume(volumeInput.value));

	loopCheckbox.addEventListener('change', () => {
	video.loop = loopCheckbox.checked;
	});

	function goFullscreen() {
	if (video.requestFullscreen) {
	video.requestFullscreen();
	} else if (video.webkitRequestFullscreen) {
	video.webkitRequestFullscreen();
	} else if (video.msRequestFullscreen) {
	video.msRequestFullscreen();
	}
	}

	video.addEventListener('loadedmetadata', () => {
	updatePlaybackRate(speedRange.value);
	updateVolume(volumeRange.value);
	video.loop = loopCheckbox.checked;
	});
	</script>
	</body>
	</html>