34 lines
703 B
CSS
Executable File
34 lines
703 B
CSS
Executable File
/*简易的视频布局*/
|
|
/* 视频播放器容器样式 */
|
|
.video-container {
|
|
position: relative;
|
|
width: 640px;
|
|
}
|
|
|
|
/* 自定义进度条容器样式 */
|
|
.custom-progress-bar {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 10px;
|
|
background: #444;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 自定义进度条填充样式 */
|
|
.custom-progress-bar .fill {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 0;
|
|
background: #f00;
|
|
transition: width .2s; /* 平滑过渡效果 */
|
|
}
|
|
|
|
/* 隐藏默认的浏览器进度条 */
|
|
video::-webkit-media-controls-timeline {
|
|
display: none;
|
|
}
|