可以通过以下步骤在 HTML 中使用 video 元素制作纯 CSS 视频播放器：
<video src="video.mp4"></video><input type="checkbox" id="play-toggle">
<label for="play-toggle" id="play-pause"></label>/* 隐藏原生的控制按钮 */
video::-webkit-media-controls {
display: none;
}
/* 显示自定义的控制按钮 */
#play-pause:before {
content: "▶";
}
/* 根据播放状态来切换按钮图标 */
#play-toggle:checked + #play-pause:before {
content: "❚❚";
}
/* 控制视频的播放和暂停 */
#play-toggle:checked ~ video {
animation-play-state: paused;
}
/* 控制视频的播放和停止 */
#play-toggle:checked ~ video {
animation-play-state: paused;
}
/* 添加动画效果 */
@keyframes play {
from {
transform: scale(1.5);
}
to {
transform: scale(1);
}
}
#play-toggle:checked ~ video {
animation-name: play;
animation-duration: 0.5s;
}完整的 HTML 代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Video Player</title>
<style>
video::-webkit-media-controls {
display: none;
}
#play-pause:before {
content: "▶";
display: block;
width: 50px;
height: 50px;
font-size: 50px;
color: white;
background-color: black;
border-radius: 50%;
line-height: 50px;
text-align: center;
cursor: pointer;
}
#play-toggle:checked + #play-pause:before {
content: "❚❚";
}
#play-toggle:checked ~ video {
animation-play-state: paused;
}
@keyframes play {
from {
transform: scale(1.5);
}
to {
transform: scale(1);
}
}
#play-toggle:checked ~ video {
animation-name: play;
animation-duration: 0.5s;
}
</style>
</head>
<body>
<input type="checkbox" id="play-toggle">
<label for="play-toggle" id="play-pause"></label>
<video src="video.mp4"></video>
</body>
</html>关键词：HTML、video、CSS、控制按钮、animation、@keyframes、animation-play-state。