songjvcheng/WebRtc_QingGan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

版本居中2
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 1m23s
Details

Browse Source
This commit is contained in:
Song367 2025-07-31 11:58:42 +08:00
parent 537006ae5f
commit 1931b859de
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/index.html
View File

@ -54,21 +54,22 @@
max-height: 100vh; max-height: 100vh;
} }
/* 视频容器样式 - 支持双缓冲 */ /* 视频容器样式 - 支持双缓冲，固定9:16比例 */
.video-container { .video-container {
position: relative; position: relative;
width: 100vw; width: 56.25vh; /* 9:16比例，与视频宽度保持一致 */
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0 auto; /* 水平居中 */
} }
#recordedVideo, #recordedVideoBuffer { #recordedVideo, #recordedVideoBuffer {
position: absolute; position: absolute;
width: 100%; width: 56.25vh; /* 9:16比例，高度为100vh时，宽度为100vh * 9/16 = 56.25vh */
height: 100%; height: 100vh;
object-fit: cover; object-fit: cover;
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
@ -133,16 +134,16 @@
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
/* 响应式设计 - 确保在不同屏幕尺寸下视频容器保持固定高度和居中 */ /* 响应式设计 - 确保在不同屏幕尺寸下视频容器保持9:16比例 */
@media (max-width: 768px) { @media (max-width: 768px) {
.video-container { .video-container {
height: 100vh; height: 100vh;
width: 100vw; width: 56.25vh; /* 9:16比例，与视频宽度保持一致 */
} }
#recordedVideo, #recordedVideoBuffer { #recordedVideo, #recordedVideoBuffer {
width: 100%; width: 56.25vh; /* 9:16比例 */
height: 100%; height: 100vh;
object-fit: cover; object-fit: cover;
} }
} }
@ -150,12 +151,12 @@
@media (min-width: 769px) { @media (min-width: 769px) {
.video-container { .video-container {
height: 100vh; height: 100vh;
width: 100vw; width: 56.25vh; /* 9:16比例，与视频宽度保持一致 */
} }
#recordedVideo, #recordedVideoBuffer { #recordedVideo, #recordedVideoBuffer {
width: 100%; width: 56.25vh; /* 9:16比例 */
height: 100%; height: 100vh;
object-fit: cover; object-fit: cover;
} }
} }
@ -164,6 +165,7 @@
@media (orientation: landscape) and (max-height: 500px) { @media (orientation: landscape) and (max-height: 500px) {
.video-container { .video-container {
height: 100vh; height: 100vh;
width: 56.25vh; /* 9:16比例，与视频宽度保持一致 */
} }
.controls { .controls {
@ -175,6 +177,7 @@
@media (orientation: portrait) { @media (orientation: portrait) {
.video-container { .video-container {
height: 100vh; height: 100vh;
width: 56.25vh; /* 9:16比例，与视频宽度保持一致 */
} }
} }