Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

Radio-Exercise_No.1 / index.html

soiz1

Update index.html

0c4d0b6 verified 4 months ago

raw

history blame

3.37 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>動画プレイヤー</h1>
	<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 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;
	}

	['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>