javascript - 为什么videojs进度栏无法保持固定

我在videojs进度栏上遇到问题。它不会保持固定。

问题：当进度栏处于hover或normal状态时，如何使其固定。

观察以下2个屏幕：

当我们在视频上移动光标时，其进度栏将向上移动。我希望将其修复。

正常：



悬停：



注意：我要使用相同的videojs version

这是我尝试过的：

   .vjs-fluid {
      overflow: hidden;
   }

   #example_video_1 .vjs-control-bar {
      display: block;
   }
   #example_video_1 .vjs-progress-control {
         bottom: 28px;
         left: 0 ;
         height: 10px;
         width: 100%;
   }

   .video-js .vjs-progress-control:hover .vjs-play-progress:after {
         display:none;
   }

    <link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>


<video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls data-setup='{ "inactivityTimeout": 0 }'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
        <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
 </video>

请提前帮助我！！！

最佳答案

我在上一个答案中误解了您的查询，对此我深表歉意。

更新的答案：

删除height属性，并在CSS中添加font-size: 10px，如下所示

#example_video_1 .vjs-progress-control {
     bottom: 28px;
     left: 0 ;
     font-size: 10px;
     width: 100%;
}

其余代码相同。

关于javascript - 为什么videojs进度栏无法保持固定，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59117970/