html视频中设置进度条在播放时不会消失

要实现在播放时不会消失的进度条，可以使用CSS的伪元素 ::after 和 transform 属性来实现。具体步骤如下：

1. 在html中添加一个包含视频和进度条的div，如下所示：

<div class="video-container">
  <video src="your-video-source.mp4"></video>
  <div class="progress-bar"></div>
</div>

2. 在CSS中设置视频容器的 position 为 relative，进度条的 position 为 absolute，并且设置进度条的高度和背景颜色等样式。

.video-container {
  position: relative;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  background-color: #ccc;
  width: 0;
  transform-origin: left;
  transition: width 0.1s ease-in;
}

3. 使用伪元素 ::after 来作为进度条的填充，设置宽度为100%。使用 transform 属性来控制伪元素的宽度，从而实现进度条的动态效果。

.progress-bar::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background-color: #f00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s ease-in;
}

.video-container video:focus + .progress-bar::after,
.video-container video:hover + .progress-bar::after,
.video-container video:active + .progress-bar::after,
.video-container video.playing + .progress-bar::after {
  transform: scaleX(1);
}

4. 使用 JavaScript 来控制视频的播放状态，并添加 playing 类来触发进度条的动画效果。

const video = document.querySelector('video');
const progress = document.querySelector('.progress-bar');

video.addEventListener('play', () => {
  progress.classList.add('playing');
});

video.addEventListener('pause', () => {
  progress.classList.remove('playing');
});

通过以上步骤，就可以实现在播放时不会消失的进度条了。