Spaces:
Running
Running
Update index.html
Browse files- index.html +22 -3
index.html
CHANGED
|
@@ -263,6 +263,24 @@
|
|
| 263 |
background-color: rgba(0, 20, 40, 0.5);
|
| 264 |
border: 1px solid #0066ff;
|
| 265 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 266 |
</style>
|
| 267 |
</head>
|
| 268 |
<body>
|
|
@@ -479,12 +497,13 @@
|
|
| 479 |
// CSS変数で字幕サイズを制御
|
| 480 |
document.documentElement.style.setProperty('--subtitle-scale', size);
|
| 481 |
|
| 482 |
-
// VTTCueの
|
| 483 |
const track = subtitleTrackElement.track;
|
| 484 |
if (track && track.cues) {
|
| 485 |
for (let i = 0; i < track.cues.length; i++) {
|
| 486 |
-
//
|
| 487 |
-
track.cues[i].line =
|
|
|
|
| 488 |
}
|
| 489 |
}
|
| 490 |
}
|
|
|
|
| 263 |
background-color: rgba(0, 20, 40, 0.5);
|
| 264 |
border: 1px solid #0066ff;
|
| 265 |
}
|
| 266 |
+
/* 字幕スタイルを修正 */
|
| 267 |
+
video::cue {
|
| 268 |
+
background-color: rgba(0, 0, 0, 0.7) !important;
|
| 269 |
+
color: #c7dbed !important;
|
| 270 |
+
font-family: 'Courier New', monospace !important;
|
| 271 |
+
text-shadow: 1px 1px 2px #000 !important;
|
| 272 |
+
outline: 1px solid #0b3e8f !important;
|
| 273 |
+
}
|
| 274 |
+
|
| 275 |
+
/* 字幕サイズ調整用のCSS変数 */
|
| 276 |
+
:root {
|
| 277 |
+
--subtitle-scale: 1;
|
| 278 |
+
}
|
| 279 |
+
|
| 280 |
+
video::cue {
|
| 281 |
+
font-size: calc(16px * var(--subtitle-scale)) !important;
|
| 282 |
+
line-height: 1.5 !important;
|
| 283 |
+
}
|
| 284 |
</style>
|
| 285 |
</head>
|
| 286 |
<body>
|
|
|
|
| 497 |
// CSS変数で字幕サイズを制御
|
| 498 |
document.documentElement.style.setProperty('--subtitle-scale', size);
|
| 499 |
|
| 500 |
+
// VTTCueのlineプロパティには数値のみを設定（'bottom'は無効）
|
| 501 |
const track = subtitleTrackElement.track;
|
| 502 |
if (track && track.cues) {
|
| 503 |
for (let i = 0; i < track.cues.length; i++) {
|
| 504 |
+
// 画面下部に表示するため、適切な数値を設定（例: 90）
|
| 505 |
+
track.cues[i].line = 90;
|
| 506 |
+
track.cues[i].snapToLines = false; // ラインスナップを無効に
|
| 507 |
}
|
| 508 |
}
|
| 509 |
}
|