本地视频播放器
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
body {
background: #000;
color: #fff;
font-family: system-ui, -apple-system, sans-serif;
overflow: hidden;
height: 100vh;
}
/* 播放器主体容器 */
.player-wrapper {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
/* 播放区域 */
.play-section {
position: relative;
width: 100%;
flex: 0 0 65vh;
overflow: hidden;
background: #000;
}
#video {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center center;
will-change: transform, filter;
transform: translateZ(0);
transition: transform 0.1s ease-out;
}
/* 手势遮罩层 */
.gesture-mask {
position: absolute;
inset: 0;
z-index: 10;
touch-action: none;
}
/* 操作提示框 */
.hint {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.75);
padding: 10px 14px;
border-radius: 6px;
font-size: 14px;
z-index: 20;
opacity: 0;
transition: opacity 0.2s;
pointer-events: none;
}
.hint.show { opacity: 1; }
/* 播放控制层 */
.control-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px;
z-index: 999;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
}
/* 进度条区域 - 常亮 */
.progress-wrap {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-bottom: 12px;
}
.time-text {
font-size: 13px;
min-width: 42px;
text-align: center;
opacity: 1 !important;
}
#progress-bar {
flex: 1;
height: 5px;
-webkit-appearance: none;
appearance: none;
background: rgba(255,255,255,0.25);
border-radius: 3px;
outline: none;
opacity: 1 !important;
}
#progress-bar::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #00FFE6;
cursor: pointer;
}
#progress-bar::-webkit-progress-value {
background: #00FFE6;
border-radius: 3px;
}
#progress-bar::-moz-progress-bar {
background: #00FFE6;
border-radius: 3px;
}
/* 功能按钮组 */
.control-buttons {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
}
.control-btn {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.control-btn:active { background: rgba(255,255,255,0.3); }
.control-btn.fade { opacity: 0.2; }
.control-btn.active { background: #03DAC5; color: #000; }
/* 倍速选择面板 */
.speed-panel {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.9);
border-radius: 8px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 1000;
}
.speed-panel.hidden { display: none; }
.speed-option {
padding: 8px 16px;
background: none;
border: none;
color: #fff;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
}
.speed-option:active { background: rgba(255,255,255,0.2); }
/* 右侧功能栏 */
.sideb
