如何删除 HTML 视频中的时间线

在 HTML 中嵌入视频是非常常见的，但有时候我们希望删除掉视频中的时间线，本文就为大家介绍一下如何实现。

方法一：使用 video.js 插件

video.js 是一款非常强大的 HTML5 视频播放器插件，它支持大量的视频格式，并且提供了非常多的自定义功能，其中也包括隐藏时间线的功能。

具体实现方法如下：

1. 首先引入 video.js 插件的相关文件：

<link href="//vjs.zencdn.net/7.11.4/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.11.4/video.min.js"></script>

2. 在 <video> 标签中设置 controls 属性并添加 vjs-hidden-time 类名：

<video id="my-video" class="video-js vjs-hidden-time" controls>
  <source src="my-video.mp4" type="video/mp4">
</video>

3. 在 JavaScript 中初始化 video.js 插件，并隐藏时间线：

var player = videojs('my-video');
player.ready(function() {
  player.controlBar.progressControl.hide();
});

实现效果如下图所示：

方法二：使用 CSS 隐藏时间线

如果你不想使用 video.js 插件，你也可以通过 CSS 来隐藏时间线。具体实现方法如下：

1. 在 CSS 中添加 .video-hide-progress 类名，并设置 display: none;：

.video-hide-progress .vjs-progress-control {
  display: none;
}

2. 在 <video> 标签中添加 .video-hide-progress 类名：

<video class="video-hide-progress" controls>
  <source src="my-video.mp4" type="video/mp4">
</video>

实现效果如下图所示：

以上就是如何删除 HTML 视频中的时间线的两种方法，希望能够帮助到大家。