Radio-Exercise_No.1 / index.html
soiz1's picture
Update index.html
f38b4fc verified
raw
history blame
32.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;
}
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;
}
/* ホバー時の時間表示 */
.hover-time {
position: absolute;
top: -30px;
transform: translateX(-50%);
background: rgba(0, 20, 40, 0.8);
color: #00ccff;
padding: 3px 6px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
display: none;
}
.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;
}
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);
}
}
/* 動画非表示モード用スタイル */
.audio-only-mode video {
display: none;
}
.audio-only-mode .video-container {
background: transparent;
border: none;
box-shadow: none;
}
.audio-only-mode .controls {
margin-top: 0;
}
/* プレビュー用スタイル */
.preview-video {
position: absolute;
width: 160px;
height: 90px;
bottom: 40px;
left: 0;
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;
}
</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 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="control-group">
<label for="audioOnlyCheckbox">音声のみモード:</label>
<input type="checkbox" id="audioOnlyCheckbox">
</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">
<video id="videoPlayer" src="v.mp4">
<track id="subtitleTrackElement" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
</track>
</video>
<video id="previewVideo" class="preview-video"></video>
<div class="custom-controls">
<div class="progress-container" id="progressContainer">
<div class="progress-bar" id="progressBar">
</div>
<div class="hover-time" id="hoverTime"></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 audioOnlyCheckbox = document.getElementById('audioOnlyCheckbox');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const progressContainer = document.getElementById('progressContainer');
const hoverTime = document.getElementById('hoverTime');
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 audioOnlyBtn = document.getElementById('audioOnlyBtn');
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.querySelector('.video-container');
const controls = document.querySelector('.controls');
const previewVideo = document.getElementById("previewVideo");
// 初期設定
video.controls = false;
let isDragging = false;
let subtitlesEnabled = true;
let normalVideoWidth = videoContainer.clientWidth;
let audioOnlyMode = false;
previewVideo.src = video.src;
previewVideo.preload = "auto";
// プログレスバーのホバーイベントを更新
progressContainer.addEventListener("mousemove", (e) => {
if (!video.duration) return;
const rect = progressContainer.getBoundingClientRect();
const pos = (e.clientX - rect.left) / rect.width;
const hoverTimeSec = pos * video.duration;
// 時間表示
const minutes = Math.floor(hoverTimeSec / 60);
const seconds = Math.floor(hoverTimeSec % 60).toString().padStart(2, '0');
hoverTime.textContent = `${minutes}:${seconds}`;
hoverTime.style.display = 'block';
hoverTime.style.left = `${e.clientX - rect.left}px`;
// プレビュー表示
previewVideo.currentTime = hoverTimeSec;
previewVideo.style.display = "block";
previewVideo.style.left = `${e.clientX - 80}px`; // 中央揃え調整
previewVideo.style.bottom = "40px"; // プログレスバーの上に表示
});
progressContainer.addEventListener('mouseleave', () => {
hoverTime.style.display = 'none';
previewVideo.style.display = 'none';
});
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 = '🔊';
}
}
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().then(() => {
playPauseBtn.textContent = '⏸';
}).catch(e => console.log(e));
}
function togglePlayPause() {
if (video.paused) {
video.play();
playPauseBtn.textContent = '⏸';
} else {
video.pause();
playPauseBtn.textContent = '▶';
}
}
function updateProgress() {
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 setupFullscreenContextMenu() {
videoContainer.addEventListener('contextmenu', (e) => {
e.preventDefault();
// 全画面モードかどうかをチェック
const isFullscreen = document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
if (isFullscreen) {
// コントロールパネルを表示
controls.style.display = controls.style.display === 'none' ? 'flex' : 'none';
}
});
}
// 動画非表示モード
function toggleAudioOnlyMode() {
audioOnlyMode = !audioOnlyMode;
audioOnlyCheckbox.checked = audioOnlyMode;
if (audioOnlyMode) {
videoContainer.classList.add('audio-only-mode');
audioOnlyBtn.textContent = '🎬'; // 動画表示アイコンに変更
} else {
videoContainer.classList.remove('audio-only-mode');
audioOnlyBtn.textContent = '🎵'; // 音声のみアイコンに戻す
}
}
// 全画面変更時の字幕サイズ調整
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;
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);
// VTTCueのlineプロパティには数値のみを設定('bottom'は無効)
const track = subtitleTrackElement.track;
if (track && track.cues) {
for (let i = 0; i < track.cues.length; i++) {
// 画面下部に表示するため、適切な数値を設定。とりあえず90。
track.cues[i].line = 90;
track.cues[i].snapToLines = false; // ラインスナップを無効に
}
}
}
function changeSubtitleTrack() {
const selectedTrack = subtitleTrack.value;
subtitleTrackElement.src = selectedTrack;
subtitleTrackElement.track.mode = selectedTrack && subtitlesEnabled ? 'showing' : 'hidden';
// トラック変更後に再度読み込み
video.textTracks[0].mode = 'hidden';
if (selectedTrack) {
video.textTracks[0].mode = subtitlesEnabled ? 'showing' : 'hidden';
}
}
function toggleSubtitleMenu() {
document.getElementById('subtitleToggle').checked ^= true;
toggleSubtitles();
}
// イベントリスナー
videoSelect.addEventListener('change', handleVideoChange);
['input', 'change', 'mouseup'].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;
});
audioOnlyCheckbox.addEventListener('change', toggleAudioOnlyMode);
audioOnlyBtn.addEventListener('click', toggleAudioOnlyMode);
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) => isDragging && setProgress(e));
volumeBtn.addEventListener('click', toggleMute);
volumeSlider.addEventListener('input', handleVolumeChange);
fullscreenBtn.addEventListener('click', goFullscreen);
// 全画面変更イベントを監視
document.addEventListener('fullscreenchange', updateSubtitleScaleForFullscreen);
document.addEventListener('webkitfullscreenchange', updateSubtitleScaleForFullscreen);
document.addEventListener('mozfullscreenchange', updateSubtitleScaleForFullscreen);
document.addEventListener('MSFullscreenChange', updateSubtitleScaleForFullscreen);
// メイン動画のソースをプレビュー用にも設定
video.addEventListener('loadedmetadata', () => {
previewVideo.src = video.src;
previewVideo.preload = "auto";
updatePlaybackRate(speedRange.value);
updateVolume(volumeRange.value);
updateSubtitleSize(subtitleSize.value);
video.loop = loopCheckbox.checked;
toggleSubtitles();
updateProgress();
// 通常時の動画幅を記録
normalVideoWidth = videoContainer.clientWidth;
});
// CSS変数を設定
document.documentElement.style.setProperty('--subtitle-scale', '1');
document.documentElement.style.setProperty('--subtitle-border-radius', '10px');
document.documentElement.style.setProperty('--fullscreen-scale', '1');
// 初期設定
setupHoverTime();
setupFullscreenContextMenu();
</script>
</body>
</html>