HTML5 媒体播放器 video、audio 自定义播放器进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Video Player</title>
<style>
.video-container {
width: 640px;
margin: auto;
}
.video-player {
width: 100%;
}
.progress-bar {
width: 100%;
background-color: #ddd;
height: 6px;
position: relative;
margin-top: 10px;
}
.progress-bar-fill {
position: absolute;
height: 100%;
background-color: #007bff;
/* 设置动画名称和持续时间 */
animation: fillAnimation 10s linear forwards;
}
/* 定义关键帧动画 */
@keyframes fillAnimation {
from { width: 0; }
to { width: 50%; }
}
</style>
</head>
<body>
<div class="video-container">
<video class="video-player" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="progress-bar">
<div class="progress-bar-fill"></div>
</div>
</div>
</body>
</html>这个代码实例展示了如何创建一个简单的自定义视频播放器，并且包含了一个进度条，其中进度条填充使用了CSS动画来模拟视频播放过程中的进度增长。这个示例可以作为构建更复杂自定义播放器的基础，并展示了如何利用CSS动画来增强用户界面的交互体验。
评论已关闭