用css+css写一个好看的视频播放页面
时间: 2023-08-04 21:14:23 浏览: 143
好的,下面是一个简单的示例代码,你可以根据自己的需要进行修改和扩展:
HTML代码:
```html
<div class="video-container">
<video controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
```
CSS代码:
```css
/* 视频容器 */
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 比例,适合大多数视频 */
height: 0;
overflow: hidden;
}
/* 视频播放器 */
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 控制条样式 */
video::-webkit-media-controls {
display: none;
}
.video-container video::-webkit-media-controls-enclosure {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
padding: 5px;
}
.video-container video::-webkit-media-controls-play-button {
background-color: #fff;
border-radius: 50%;
width: 48px;
height: 48px;
}
.video-container video::-webkit-media-controls-timeline {
height: 2px;
background-color: #fff;
}
.video-container video::-webkit-media-controls-time-remaining-display {
color: #fff;
}
.video-container video::-webkit-media-controls-current-time-display {
color: #fff;
}
```
这里只是一个简单的示例代码,你可以根据需求进行修改和扩展,比如添加更多控制按钮、播放器皮肤等。
阅读全文
相关推荐















