Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

Radio-Exercise_No.1 / index.html

soiz1

Update index.html

6ec4f66 verified 5 months ago

raw

history blame

40.4 kB

	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8">
	<title>ラジオ体操動画プレイヤー</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
	<link rel="icon" href="icon.png" type="image/png">
	<style>
	body {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #0a0a12;
	color: #00ffcc;
	font-family: "M PLUS Rounded 1c", monospace;
	padding: 20px;
	margin: 0;
	overflow-x: hidden; /* 横スクロール禁止 */
	}

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

	.video-container {
	position: relative;
	max-width: 800px;
	margin-bottom: 20px;
	margin-top: 30px;
	border: 2px solid #0066ff;
	box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
	background: #000;
	}
	/* ホバー時の時間表示スタイル */
	.hover-time {
	position: absolute;
	top: -30px;
	transform: translateX(-50%);
	background: rgba(0, 20, 40, 0.9);
	color: #00ccff;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 12px;
	pointer-events: none;
	display: none;
	white-space: nowrap;
	font-family: "M PLUS Rounded 1c", monospace;
	}

	/* サムネイルプレビュー用スタイル */
	.thumbnail-preview {
	position: absolute;
	width: 160px;
	height: 90px;
	background: #000;
	border: 2px solid #00aaff;
	box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
	display: none;
	pointer-events: none;
	z-index: 10;
	bottom: 50px;
	transform: translateX(-50%);
	border-radius: 4px;
	object-fit: cover;
	}
	video {
	width: 100%;
	display: block;
	}

	/* 字幕スタイル */
	video::cue {
	background-color: rgba(0, 0, 0, 0.7) !important;
	color: #c7dbed !important;
	font-family: "M PLUS Rounded 1c", monospace !important;
	text-shadow: 1px 1px 2px #000 !important;
	outline: 3px solid #0b3e8f !important;
	border-radius: 10px !important; /* 角を丸める */
	}

	/* カスタム動画コントロール */
	video::-webkit-media-controls {
	display: none !important;
	}

	.custom-controls {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	/background: linear-gradient(to top, rgba(0, 20, 40, 0.9), transparent);/
	padding: 10px;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: opacity 0.3s;
	}

	.video-container:hover .custom-controls {
	opacity: 1;
	}

	.progress-container {
	width: 100%;
	height: 8px;
	background: #001133;
	margin-bottom: 10px;
	cursor: pointer;
	position: relative;
	}

	.progress-bar {
	height: 100%;
	background: #00aaff;
	width: 0%;
	position: relative;
	}

	.progress-bar::after {
	content: '';
	position: absolute;
	right: -5px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background: #00ccff;
	border-radius: 50%;
	box-shadow: 0 0 5px #00ccff;
	}

	/* プレビュー用スタイル */
	.preview-tooltip {
	position: absolute;
	bottom: 20px;
	transform: translateX(-50%);
	background: rgba(0, 20, 40, 0.9);
	border: 1px solid #0066ff;
	padding: 5px 10px;
	border-radius: 5px;
	display: none;
	z-index: 100;
	pointer-events: none;
	}

	.preview-time {
	color: #00ccff;
	font-size: 12px;
	text-align: center;
	margin-bottom: 5px;
	}

	.preview-frame {
	width: 160px;
	height: 90px;
	background-color: #000;
	border: 1px solid #0066ff;
	background-size: cover;
	background-position: center;
	}

	.buttons-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	}

	.left-controls, .right-controls {
	display: flex;
	align-items: center;
	gap: 15px;
	}

	.control-btn {
	background: none;
	border: none;
	color: #00ccff;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s;
	}

	.control-btn:hover {
	color: #00ffcc;
	text-shadow: 0 0 5px #00ffcc;
	}

	.time-display {
	font-size: 14px;
	color: #00aaff;
	box-shadow: 0.1px 0.1px 0.1px black;
	font-family: "M PLUS Rounded 1c", monospace;
	}

	.volume-container {
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.volume-slider {
	width: 80px;
	-webkit-appearance: none;
	height: 4px;
	background: #001133;
	outline: none;
	}

	.volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	background: #00aaff;
	border-radius: 50%;
	cursor: pointer;
	}

	.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: "M PLUS Rounded 1c", monospace;
	}

	button {
	background-color: #001133;
	color: #00ccff;
	border: 1px solid #0066ff;
	padding: 8px 15px;
	cursor: pointer;
	font-family: "M PLUS Rounded 1c", 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;
	}

	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%);
	}

	/* 字幕設定用スタイル */
	.subtitle-settings {
	margin-top: 10px;
	padding: 10px;
	background-color: rgba(0, 20, 40, 0.5);
	border: 1px solid #0066ff;
	}

	/* 字幕サイズ調整用のCSS変数 */
	:root {
	--subtitle-scale: 1;
	--subtitle-border-radius: 10px;
	}

	video::cue {
	font-size: calc(16px * var(--subtitle-scale)) !important;
	line-height: 1.5 !important;
	border-radius: var(--subtitle-border-radius) !important;
	}

	/* 全画面時の字幕サイズ調整 */
	.video-container:fullscreen video::cue,
	.video-container:-webkit-full-screen video::cue,
	.video-container:-moz-full-screen video::cue,
	.video-container:-ms-fullscreen video::cue {
	font-size: calc(16px * var(--subtitle-scale) * var(--fullscreen-scale, 1)) !important;
	}
	.thumbnail-preview {
	position: absolute;
	width: 160px;
	height: 90px;
	background: #000;
	border: 2px solid #00aaff;
	box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
	display: none;
	pointer-events: none;
	z-index: 10;
	bottom: 50px; /* プログレスバーの上に表示 */
	transform: translateX(-50%);
	border-radius: 4px;
	object-fit: cover;
	}
	body {
	margin: 0;
	padding: 0;
	background-color: #0a192f; /* 暗い青 */
	height: 100vh;
	width: 100vw;
	}

	.ripple {
	position: absolute;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(100, 210, 255, 0.3); /* 半透明の薄い水色 */
	transform: translate(-50%, -50%);
	pointer-events: none;
	animation: ripple-animation 4s ease-out forwards;
	z-index: -1;
	position: absolute; /* または fixed / relative、必要に応じて調整 */
	}

	@keyframes ripple-animation {
	0% {
	width: 0;
	height: 0;
	opacity: 0.6;
	}
	100% {
	width: 600px;
	height: 600px;
	opacity: 0;
	}
	}

	/* ローディングアニメーション */
	.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 1s ease-out;
	}

	.spinner-box {
	width: 300px;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: transparent;
	}

	/* 軌道スタイル */
	.leo {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	}

	.blue-orbit {
	width: 165px;
	height: 165px;
	border: 1px solid #91daffa5;
	animation: spin3D 3s linear .2s infinite;
	}

	.green-orbit {
	width: 120px;
	height: 120px;
	border: 1px solid #91ffbfa5;
	animation: spin3D 2s linear 0s infinite;
	}

	.red-orbit {
	width: 90px;
	height: 90px;
	border: 1px solid #ffca91a5;
	animation: spin3D 1s linear 0s infinite;
	}

	.white-orbit {
	width: 60px;
	height: 60px;
	border: 2px solid #ffffff;
	animation: spin3D 10s linear 0s infinite;
	}

	.w1 {
	transform: rotate3D(1, 1, 1, 90deg);
	}

	.w2 {
	transform: rotate3D(1, 2, .5, 90deg);
	}

	.w3 {
	transform: rotate3D(.5, 1, 2, 90deg);
	}

	/* キーフレームアニメーション */
	@keyframes spin3D {
	from {
	transform: rotate3d(.5,.5,.5, 360deg);
	}
	to {
	transform: rotate3d(0,0,0, 0deg);
	}
	}

	@keyframes spin {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(360deg);
	}
	}

	/* 全画面コンテキストメニュー */
	.fullscreen-context-menu {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #0f0f1a;
	border: 1px solid #0066ff;
	box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
	padding: 15px;
	z-index: 1000;
	display: none;
	}

	.fullscreen-context-menu button {
	display: block;
	width: 100%;
	margin-bottom: 5px;
	}

	.fullscreen-context-menu button:last-child {
	margin-bottom: 0;
	}

	/* 音声/字幕のみモード */
	.audio-only-mode {
	position: relative;
	}

	.audio-only-mode .video-placeholder {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	color: #00ccff;
	font-size: 24px;
	height: 450px; /* 動画の高さに合わせて調整 */
	}

	.audio-only-mode video {
	display: none;
	}
	.hover-time {
	position: absolute;
	top: -30px;
	transform: translateX(-50%);
	background: rgba(0, 20, 40, 0.9);
	color: #00ccff;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 12px;
	pointer-events: none;
	display: none;
	white-space: nowrap;
	font-family: "M PLUS Rounded 1c", monospace;
	}
	</style>
	</head>

	<body>
	<!-- ローディングオーバーレイ -->
	<div class="loading-overlay" id="loadingOverlay">
	<div class="spinner-box">
	<div class="blue-orbit leo"></div>
	<div class="green-orbit leo"></div>
	<div class="red-orbit leo"></div>
	<div class="white-orbit w1 leo"></div>
	<div class="white-orbit w2 leo"></div>
	<div class="white-orbit w3 leo"></div>
	</div>
	</div>

	<!-- 全画面コンテキストメニュー -->
	<div class="fullscreen-context-menu" id="fullscreenContextMenu">
	<button id="audioOnlyBtn">音声/字幕のみモード</button>
	<button id="showVideoBtn">動画表示モード</button>
	<button id="exitFullscreenBtn">全画面を終了</button>
	<button id="closeContextMenuBtn">閉じる</button>
	</div>

	<div id="ripple-container">
	</div>
	<script>
	// ローディングアニメーションをフェードアウト
	window.addEventListener('load', function() {
	setTimeout(function() {
	const loadingOverlay = document.getElementById('loadingOverlay');
	loadingOverlay.style.opacity = '0';
	setTimeout(function() {
	loadingOverlay.style.display = 'none';
	}, 1000); // フェードアウト完了後に非表示にする
	}, 1500); // ページ読み込み後1.5秒でフェードアウト開始
	});

	document.addEventListener('DOMContentLoaded', function() {
	const container = document.getElementById('ripple-container');

	function createRipple() {
	const ripple = document.createElement('div');
	ripple.classList.add('ripple');

	// ランダムな位置
	const posX = Math.random() * 100;
	const posY = Math.random() * 100;

	// ランダムなサイズとアニメーション時間
	const maxSize = 400 + Math.random() * 500;
	const duration = 3 + Math.random() * 3;

	// 半透明の薄い水色のバリエーション
	const hue = 190 + Math.random() * 20 - 10; // 水色を中心に少し変化
	const saturation = 80 + Math.random() * 15;
	const lightness = 70 + Math.random() * 20;
	const opacity = 0.3 + Math.random() * 0.3;

	ripple.style.left = `${posX}%`;
	ripple.style.top = `${posY}%`;
	ripple.style.borderColor = `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`;
	ripple.style.animationDuration = `${duration}s`;

	// キーフレームを動的に変更
	//Math.random()で 0〜1 のランダムな数を生成。 .toString(36) で36進数（0-9 + a-z）に変換。
	//.substr(2, 9) で先頭の "0." を除いた部分から9文字取り出し、結果として英数字のランダムな9文字列を生成。
	const animationName = `ripple-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
	ripple.style.animationName = animationName;

	const style = document.createElement('style');
	style.innerHTML = `
	@keyframes ${animationName} {
	0% {
	width: 0;
	height: 0;
	opacity: ${opacity};
	}
	100% {
	width: ${maxSize}px;
	height: ${maxSize}px;
	opacity: 0;
	}
	}
	`;
	document.head.appendChild(style);

	container.appendChild(ripple);

	// アニメーション終了後に要素を削除
	ripple.addEventListener('animationend', function() {
	ripple.remove();
	style.remove();
	});
	}

	// 最初の波紋をいくつか作成
	for (let i = 0; i < 8; i++) {
	setTimeout(createRipple, i * 600);
	}

	// 定期的に新しい波紋を作成
	setInterval(createRipple, 1200);

	// クリックでも波紋を作成
	document.addEventListener('click', function(e) {
	createRippleAtPosition(e.clientX, e.clientY);
	});

	function createRippleAtPosition(x, y) {
	const ripple = document.createElement('div');
	ripple.classList.add('ripple');

	const maxSize = 400 + Math.random() * 500;
	const duration = 3 + Math.random() * 3;
	const hue = 190 + Math.random() * 20 - 10;
	const saturation = 80 + Math.random() * 15;
	const lightness = 70 + Math.random() * 20;
	const opacity = 0.3 + Math.random() * 0.3;

	ripple.style.left = `${x}px`;
	ripple.style.top = `${y}px`;
	ripple.style.borderColor = `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`;
	ripple.style.animationDuration = `${duration}s`;

	const animationName = `ripple-click-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
	ripple.style.animationName = animationName;

	const style = document.createElement('style');
	style.innerHTML = `
	@keyframes ${animationName} {
	0% {
	width: 0;
	height: 0;
	opacity: ${opacity};
	}
	100% {
	width: ${maxSize}px;
	height: ${maxSize}px;
	opacity: 0;
	}
	}
	`;
	document.head.appendChild(style);

	container.appendChild(ripple);

	ripple.addEventListener('animationend', function() {
	ripple.remove();
	style.remove();
	});
	}
	});
	</script>
	<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="10" 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>
	<!-- 字幕設定セクション -->
	<div class="subtitle-settings">
	<div class="control-group">
	<label for="subtitleToggle">字幕表示：</label>
	<input type="checkbox" id="subtitleToggle" checked>
	</div>
	<div class="control-group">
	<label for="subtitleSize">文字サイズ：</label>
	<input type="range" id="subtitleSize" min="0.5" max="5" step="0.1" value="1.5">
	<input type="number" id="subtitleSizeInput" min="0.01" step="0.01" value="1.5">
	</div>
	<div class="control-group">
	<label for="subtitleTrack">字幕トラック：</label>
	<select id="subtitleTrack">
	<option value="v.vtt">日本語</option>
	<option value="">字幕なし</option>
	</select>
	</div>
	</div>
	<button onclick="goFullscreen()">全画面</button>
	</div>
	<div class="video-container" id="videoContainer">
	<div class="video-placeholder" id="videoPlaceholder" style="display: none;">
	音声/字幕のみモード
	</div>
	<video id="videoPlayer" src="v.mp4" crossorigin="anonymous">
	<track id="subtitleTrackElement" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
	</track>
	</video>
	<div class="preview-tooltip" id="previewTooltip">
	<div class="preview-time" id="previewTime">00:00</div>
	<div class="preview-frame" id="previewFrame"></div>
	</div>
	<div class="custom-controls">
	<div class="progress-container" id="progressContainer">
	<div class="progress-bar" id="progressBar">
	</div>
	</div>
	<div class="buttons-container">
	<div class="left-controls">
	<button class="control-btn" id="playPauseBtn">▶</button>
	<span class="time-display" id="timeDisplay">00:00 / 00:00</span>
	</div>
	<div class="right-controls">
	<div class="volume-container">
	<button class="control-btn" id="volumeBtn">🔊</button>
	<input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="1">
	</div>
	<button class="control-btn" id="subtitleBtn" title="字幕">🔤</button>
	<button class="control-btn" id="audioOnlyBtn" title="音声/字幕のみ">🔈</button>
	<button class="control-btn" id="fullscreenBtn">⛶</button>
	</div>
	</div>
	</div>
	</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');
	const playPauseBtn = document.getElementById('playPauseBtn');
	const progressBar = document.getElementById('progressBar');
	const progressContainer = document.getElementById('progressContainer');
	const timeDisplay = document.getElementById('timeDisplay');
	const volumeBtn = document.getElementById('volumeBtn');
	const volumeSlider = document.getElementById('volumeSlider');
	const fullscreenBtn = document.getElementById('fullscreenBtn');
	const subtitleBtn = document.getElementById('subtitleBtn');
	const subtitleToggle = document.getElementById('subtitleToggle');
	const subtitleSize = document.getElementById('subtitleSize');
	const subtitleSizeInput = document.getElementById('subtitleSizeInput');
	const subtitleTrack = document.getElementById('subtitleTrack');
	const subtitleTrackElement = document.getElementById('subtitleTrackElement');
	const videoContainer = document.getElementById('videoContainer');
	const videoPlaceholder = document.getElementById('videoPlaceholder');
	const previewTooltip = document.getElementById('previewTooltip');
	const previewTime = document.getElementById('previewTime');
	const previewFrame = document.getElementById('previewFrame');
	const audioOnlyBtn = document.getElementById('audioOnlyBtn');
	const fullscreenContextMenu = document.getElementById('fullscreenContextMenu');
	const exitFullscreenBtn = document.getElementById('exitFullscreenBtn');
	const showVideoBtn = document.getElementById('showVideoBtn');
	const closeContextMenuBtn = document.getElementById('closeContextMenuBtn');

	// プレビュー用動画を動的に作成
	const previewVideo = document.createElement('video');
	previewVideo.id = 'previewVideo';
	previewVideo.className = 'thumbnail-preview';
	previewVideo.muted = true;
	previewVideo.preload = 'auto';
	videoContainer.appendChild(previewVideo);

	// 初期設定
	video.controls = false;
	previewVideo.src = video.src;
	let isDragging = false;
	let subtitlesEnabled = true;
	let normalVideoWidth = videoContainer.clientWidth;
	let isAudioOnlyMode = false;
	let hoverTimeout;
	let canvas = null;
	let previewCanvas = null;
	let previewContext = null;
	let isGeneratingPreview = false;

	// プレビュー用キャンバスを作成
	function createPreviewCanvas() {
	if (!canvas) {
	canvas = document.createElement('canvas');
	canvas.width = video.videoWidth \|\| 640;
	canvas.height = video.videoHeight \|\| 360;
	}

	if (!previewCanvas) {
	previewCanvas = document.createElement('canvas');
	previewCanvas.width = 160;
	previewCanvas.height = 90;
	previewContext = previewCanvas.getContext('2d');
	}
	}

	// プレビュー画像を生成
	function generatePreview(time) {
	if (isGeneratingPreview \|\| !video.readyState) return;

	try {
	isGeneratingPreview = true;
	createPreviewCanvas();

	const currentTime = video.currentTime;
	video.currentTime = time;

	const onSeeked = () => {
	video.removeEventListener('seeked', onSeeked);

	try {
	const ctx = canvas.getContext('2d');
	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	previewContext.drawImage(canvas, 0, 0, previewCanvas.width, previewCanvas.height);
	previewFrame.style.backgroundImage = `url(${previewCanvas.toDataURL()})`;
	} catch (e) {
	console.error('Preview generation error:', e);
	previewFrame.style.backgroundImage = 'linear-gradient(to bottom, #0066ff, #00aaff)';
	}

	video.currentTime = currentTime;
	isGeneratingPreview = false;
	};

	video.addEventListener('seeked', onSeeked);
	} catch (e) {
	console.error('Preview error:', e);
	isGeneratingPreview = false;
	}
	}

	// プレビューツールチップを表示
	function showPreviewTooltip(e) {
	if (!video.duration) return;

	const rect = progressContainer.getBoundingClientRect();
	const percent = (e.clientX - rect.left) / rect.width;
	const time = Math.max(0, Math.min(percent, 1)) * video.duration;

	const tooltipWidth = previewTooltip.offsetWidth;
	let left = e.clientX - rect.left;
	left = Math.max(tooltipWidth / 2, Math.min(left, rect.width - tooltipWidth / 2));

	previewTooltip.style.left = `${left}px`;

	const minutes = Math.floor(time / 60);
	const seconds = Math.floor(time % 60).toString().padStart(2, '0');
	previewTime.textContent = `${minutes}:${seconds}`;

	generatePreview(time);
	previewTooltip.style.display = 'block';
	}

	// プレビューツールチップを非表示
	function hidePreviewTooltip() {
	previewTooltip.style.display = 'none';
	}

	// ホバー時の時間表示設定
	function setupHoverTime() {
	const hoverTime = document.createElement('div');
	hoverTime.className = 'hover-time';
	progressContainer.appendChild(hoverTime);

	progressContainer.addEventListener("mousemove", (e) => {
	if (!video.duration) return;

	const rect = progressContainer.getBoundingClientRect();
	const pos = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
	const time = pos * video.duration;

	const minutes = Math.floor(time / 60);
	const seconds = Math.floor(time % 60).toString().padStart(2, '0');
	hoverTime.textContent = `${minutes}:${seconds}`;
	hoverTime.style.display = 'block';
	hoverTime.style.left = `${e.clientX - rect.left}px`;

	previewVideo.style.display = "block";
	previewVideo.style.left = `${e.clientX}px`;

	clearTimeout(hoverTimeout);
	hoverTimeout = setTimeout(() => {
	previewVideo.currentTime = time;
	}, 50);
	});

	progressContainer.addEventListener("mouseleave", () => {
	const hoverTime = document.querySelector('.hover-time');
	if (hoverTime) hoverTime.style.display = "none";
	previewVideo.style.display = "none";
	clearTimeout(hoverTimeout);
	});
	}

	// 再生速度を更新
	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;
	volumeSlider.value = volume;
	video.volume = volume;

	if (volume === 0) {
	volumeBtn.textContent = '🔇';
	} else if (volume < 0.5) {
	volumeBtn.textContent = '🔈';
	} else {
	volumeBtn.textContent = '🔊';
	}
	}


	// プレビュー用動画のソースをメイン動画と同期
	previewVideo.src = video.src;

	// ホバー時のプレビュー更新関数（メイン動画を操作しない）
	function updateHoverPreview(e) {
	if (!video.duration) return;

	const rect = progressContainer.getBoundingClientRect();
	const pos = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
	const time = pos * video.duration;

	// 時間表示更新
	const minutes = Math.floor(time / 60);
	const seconds = Math.floor(time % 60).toString().padStart(2, '0');
	hoverTime.textContent = `${minutes}:${seconds}`;
	hoverTime.style.display = 'block';
	hoverTime.style.left = `${e.clientX - rect.left}px`;

	// プレビュー動画のみを更新（メイン動画は変更しない）
	if (previewVideo.readyState > 0) {
	previewVideo.currentTime = time;
	}

	// プレビュー動画の位置調整
	previewVideo.style.display = "block";
	previewVideo.style.left = `${e.clientX}px`;
	}

	// ホバーイベントリスナーの設定
	function setupHoverEvents() {
	const hoverTime = document.createElement('div');
	hoverTime.className = 'hover-time';
	progressContainer.appendChild(hoverTime);

	let hoverTimeout;

	progressContainer.addEventListener("mousemove", (e) => {
	clearTimeout(hoverTimeout);
	hoverTimeout = setTimeout(() => {
	updateHoverPreview(e);
	}, 30); // 30msのデバウンス
	});

	progressContainer.addEventListener("mouseleave", () => {
	hoverTime.style.display = "none";
	previewVideo.style.display = "none";
	clearTimeout(hoverTimeout);
	});
	}

	// 動画変更時の処理（プレビュー動画も同期）
	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;
	previewVideo.src = selected; // プレビュー動画も更新

	// 両方の動画をロード
	const loadVideo = video.load();
	const loadPreview = previewVideo.load();

	Promise.all([loadVideo, loadPreview])
	.then(() => video.play())
	.catch(e => console.error("動画読み込みエラー:", e));
	}

	// 初期化関数
	function init() {
	setupHoverEvents();

	// プレビュー動画のメタデータが読み込まれたら準備完了
	previewVideo.addEventListener('loadedmetadata', () => {
	console.log("プレビュー動画の準備が完了しました");
	});

	// メイン動画のイベントリスナー設定
	video.addEventListener('loadedmetadata', () => {
	previewVideo.src = video.src; // ソースを再度同期
	updatePlaybackRate(speedRange.value);
	updateVolume(volumeRange.value);
	});
	}

	// 初期化を実行
	init();
	// 再生/一時停止を切り替え
	function togglePlayPause() {
	if (video.paused) {
	video.play().then(() => {
	playPauseBtn.textContent = '⏸';
	}).catch(e => console.log(e));
	} else {
	video.pause();
	playPauseBtn.textContent = '▶';
	}
	}

	// 進捗バーを更新
	function updateProgress() {
	if (!video.duration) return;

	const percent = (video.currentTime / video.duration) * 100;
	progressBar.style.width = `${percent}%`;

	const currentMinutes = Math.floor(video.currentTime / 60);
	const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
	const durationMinutes = Math.floor(video.duration / 60);
	const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0');

	timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
	}

	// 進捗バーを設定
	function setProgress(e) {
	const width = progressContainer.clientWidth;
	const clickX = e.offsetX;
	const duration = video.duration;
	video.currentTime = (clickX / width) * duration;
	}

	// ミュートを切り替え
	function toggleMute() {
	video.muted = !video.muted;
	if (video.muted) {
	volumeBtn.textContent = '🔇';
	volumeSlider.value = 0;
	} else {
	updateVolume(video.volume);
	}
	}

	// 音量変更を処理
	function handleVolumeChange() {
	video.muted = false;
	updateVolume(volumeSlider.value);
	}

	// 全画面表示を切り替え
	function goFullscreen() {
	if (document.fullscreenElement \|\| document.webkitFullscreenElement \|\| document.msFullscreenElement) {
	if (document.exitFullscreen) {
	document.exitFullscreen();
	} else if (document.webkitExitFullscreen) {
	document.webkitExitFullscreen();
	} else if (document.msExitFullscreen) {
	document.msExitFullscreen();
	}
	} else {
	if (videoContainer.requestFullscreen) {
	videoContainer.requestFullscreen();
	} else if (videoContainer.webkitRequestFullscreen) {
	videoContainer.webkitRequestFullscreen();
	} else if (videoContainer.msRequestFullscreen) {
	videoContainer.msRequestFullscreen();
	}
	}
	}

	// 全画面コンテキストメニューを表示
	function showContextMenu(e) {
	if (!(document.fullscreenElement \|\| document.webkitFullscreenElement \|\| document.msFullscreenElement)) {
	return;
	}

	e.preventDefault();

	fullscreenContextMenu.style.display = 'block';
	fullscreenContextMenu.style.left = `${e.clientX}px`;
	fullscreenContextMenu.style.top = `${e.clientY}px`;
	}

	// 全画面コンテキストメニューを非表示
	function hideContextMenu() {
	fullscreenContextMenu.style.display = 'none';
	}

	// 音声/字幕のみモードを切り替え
	function toggleAudioOnlyMode() {
	isAudioOnlyMode = !isAudioOnlyMode;

	if (isAudioOnlyMode) {
	videoContainer.classList.add('audio-only-mode');
	videoPlaceholder.style.display = 'flex';
	video.style.display = 'none';
	audioOnlyBtn.textContent = '🎥';
	audioOnlyBtn.title = '動画表示モード';
	} else {
	videoContainer.classList.remove('audio-only-mode');
	videoPlaceholder.style.display = 'none';
	video.style.display = 'block';
	audioOnlyBtn.textContent = '🔈';
	audioOnlyBtn.title = '音声/字幕のみ';
	}

	hideContextMenu();
	}

	// 全画面時の字幕サイズ調整
	function updateSubtitleScaleForFullscreen() {
	if (document.fullscreenElement \|\| document.webkitFullscreenElement \|\|
	document.mozFullScreenElement \|\| document.msFullscreenElement) {
	const fullscreenWidth = window.innerWidth;
	const scaleFactor = fullscreenWidth / normalVideoWidth;
	document.documentElement.style.setProperty('--fullscreen-scale', scaleFactor);
	} else {
	document.documentElement.style.setProperty('--fullscreen-scale', 1);
	}
	}

	// 字幕表示を切り替え
	function toggleSubtitles() {
	subtitlesEnabled = subtitleToggle.checked;
	if (subtitleTrackElement.track) {
	subtitleTrackElement.track.mode = subtitlesEnabled ? 'showing' : 'hidden';
	}
	subtitleBtn.style.color = subtitlesEnabled ? '#00ccff' : '#666';
	}

	// 字幕サイズを更新
	function updateSubtitleSize(value) {
	const size = parseFloat(value);
	subtitleSizeInput.value = size;
	subtitleSize.value = size;
	document.documentElement.style.setProperty('--subtitle-scale', size);

	const track = subtitleTrackElement.track;
	if (track && track.cues) {
	for (let i = 0; i < track.cues.length; i++) {
	track.cues[i].line = 90;
	track.cues[i].snapToLines = false;
	}
	}
	}

	// 字幕トラックを変更
	function changeSubtitleTrack() {
	const selectedTrack = subtitleTrack.value;
	subtitleTrackElement.src = selectedTrack;

	if (video.textTracks.length > 0) {
	video.textTracks[0].mode = selectedTrack && subtitlesEnabled ? 'showing' : 'hidden';
	}
	}

	// 字幕メニューを切り替え
	function toggleSubtitleMenu() {
	subtitleToggle.checked = !subtitleToggle.checked;
	toggleSubtitles();
	}

	// イベントリスナーを設定
	function setupEventListeners() {
	videoSelect.addEventListener('change', handleVideoChange);

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

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

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

	subtitleToggle.addEventListener('change', toggleSubtitles);
	subtitleTrack.addEventListener('change', changeSubtitleTrack);
	subtitleBtn.addEventListener('click', toggleSubtitleMenu);

	playPauseBtn.addEventListener('click', togglePlayPause);
	video.addEventListener('click', togglePlayPause);
	video.addEventListener('play', () => playPauseBtn.textContent = '⏸');
	video.addEventListener('pause', () => playPauseBtn.textContent = '▶');
	video.addEventListener('timeupdate', updateProgress);

	progressContainer.addEventListener('click', setProgress);
	progressContainer.addEventListener('mousedown', () => isDragging = true);
	document.addEventListener('mouseup', () => isDragging = false);
	progressContainer.addEventListener('mousemove', (e) => {
	if (isDragging) setProgress(e);
	showPreviewTooltip(e);
	});
	progressContainer.addEventListener('mouseenter', showPreviewTooltip);
	progressContainer.addEventListener('mouseleave', hidePreviewTooltip);

	volumeBtn.addEventListener('click', toggleMute);
	volumeSlider.addEventListener('input', handleVolumeChange);
	fullscreenBtn.addEventListener('click', goFullscreen);
	audioOnlyBtn.addEventListener('click', toggleAudioOnlyMode);

	videoContainer.addEventListener('contextmenu', showContextMenu);
	exitFullscreenBtn.addEventListener('click', () => {
	if (document.exitFullscreen) document.exitFullscreen();
	hideContextMenu();
	});
	showVideoBtn.addEventListener('click', () => {
	if (isAudioOnlyMode) toggleAudioOnlyMode();
	hideContextMenu();
	});
	closeContextMenuBtn.addEventListener('click', hideContextMenu);
	document.addEventListener('click', hideContextMenu);

	document.addEventListener('fullscreenchange', updateSubtitleScaleForFullscreen);
	document.addEventListener('webkitfullscreenchange', updateSubtitleScaleForFullscreen);
	document.addEventListener('mozfullscreenchange', updateSubtitleScaleForFullscreen);
	document.addEventListener('MSFullscreenChange', updateSubtitleScaleForFullscreen);

	video.addEventListener('loadedmetadata', () => {
	updatePlaybackRate(speedRange.value);
	updateVolume(volumeRange.value);
	updateSubtitleSize(subtitleSize.value);
	video.loop = loopCheckbox.checked;
	toggleSubtitles();
	updateProgress();
	normalVideoWidth = videoContainer.clientWidth;
	createPreviewCanvas();
	});
	}

	// CSS変数を初期設定
	document.documentElement.style.setProperty('--subtitle-scale', '1');
	document.documentElement.style.setProperty('--subtitle-border-radius', '10px');
	document.documentElement.style.setProperty('--fullscreen-scale', '1');

	// 初期化
	setupHoverTime();
	setupEventListeners();
	createPreviewCanvas();
	</script>
	</body>

	</html>