Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

Radio-Exercise_No.1 / index.html

soiz1

Update index.html

47f161c verified 5 months ago

raw

history blame

6.54 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: #0a0a12;
	color: #00ffcc;
	font-family: 'Courier New', monospace;
	padding: 20px;
	margin: 0;
	}

	h1 {
	color: #00aaff;
	text-shadow: 0 0 5px #0066ff;
	border-bottom: 1px solid #0066ff;
	padding-bottom: 10px;
	}

	video {
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
	border: 2px solid #0066ff;
	box-shadow: 0 0 10px #0066ff;
	}

	.controls {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	max-width: 800px;
	background-color: #0f0f1a;
	padding: 20px;
	border: 1px solid #0066ff;
	box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
	}

	.control-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	flex-wrap: nowrap;
	}

	.control-group label {
	white-space: nowrap;
	min-width: 100px;
	text-align: right;
	color: #00ccff;
	}

	input[type="range"] {
	flex-grow: 1;
	-webkit-appearance: none;
	height: 8px;
	background: #001133;
	border-radius: 5px;
	outline: none;
	}

	input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	background: #00aaff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 5px #00aaff;
	}

	input[type="number"], select {
	background-color: #001133;
	color: #00ccff;
	border: 1px solid #0066ff;
	padding: 5px;
	font-family: 'Courier New', monospace;
	}

	button {
	background-color: #001133;
	color: #00ccff;
	border: 1px solid #0066ff;
	padding: 8px 15px;
	cursor: pointer;
	font-family: 'Courier New', monospace;
	transition: all 0.3s;
	align-self: flex-start;
	}

	button:hover {
	background-color: #0066ff;
	color: #000;
	box-shadow: 0 0 10px #0066ff;
	}

	select {
	width: 300px;
	background-color: #001133;
	color: #00ccff;
	border: 1px solid #0066ff;
	padding: 5px;
	}

	.video-selector {
	margin-top: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	}

	input[type="checkbox"] {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	background: #001133;
	border: 1px solid #0066ff;
	position: relative;
	}

	input[type="checkbox"]:checked {
	background: #0066ff;
	box-shadow: 0 0 5px #0066ff;
	}

	input[type="checkbox"]:checked::after {
	content: "✓";
	position: absolute;
	color: #000;
	font-size: 14px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
	</style>

	</head>
	<body>
	<h1>ラジオ体操動画プレイヤー<br>For Kushihara</h1>

	<div class="controls">
	<div class="control-group">
	<label for="videoSelect">動画の音量：</label>
	<select id="videoSelect">
	<option value="v.mp4">小</option>
	<option value="v-2.mp4">大(+50dB)</option>
	</select>
	</div>
	<div class="control-group">
	<label for="speedRange">再生速度：</label>
	<input type="range" id="speedRange" min="0.0001" max="20" step="0.0001" value="1" style="width:700px !important;">
	<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>

	<video id="videoPlayer" src="v.mp4" controls></video>
	<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>