diff --git a/css/视频布局.css b/css/视频布局.css new file mode 100644 index 0000000..ff2f9e9 --- /dev/null +++ b/css/视频布局.css @@ -0,0 +1,33 @@ +/*简易的视频布局*/ +/* 视频播放器容器样式 */ +.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; +}