在HTML5中，视频播放完毕后，默认情况下视频会停留在最后一帧。如果你希望在视频播放完毕后优雅地恢复封面图，可以通过JavaScript监听视频的ended事件，并在事件触发时将视频的poster属性重新设置为封面图的URL。
以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video with Cover Image</title>
<style>
video {
width: 100%;
max-width: 600px;
height: auto;
}
</style>
</head>
<body>
<video id="myVideo" controls poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
// 获取视频元素
const video = document.getElementById('myVideo');
// 监听视频播放结束事件
video.addEventListener('ended', function() {
// 将视频的poster属性重新设置为封面图的URL
video.poster = 'cover.jpg';
// 如果需要，可以将视频的currentTime重置为0
video.currentTime = 0;
});
</script>
</body>
</html>
poster 属性：poster 属性用于指定视频的封面图。当视频未播放时，封面图会显示在视频区域。
ended 事件：当视频播放结束时，会触发ended事件。在这个事件的处理函数中，我们将poster属性重新设置为封面图的URL，从而恢复封面图。
currentTime 属性：如果你希望在恢复封面图的同时将视频的播放进度重置为0，可以将currentTime设置为0。
ended事件中调用video.play()方法。通过这种方式，你可以在视频播放完毕后优雅地恢复封面图，提升用户体验。