数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在 video.js 播放器中隐藏播放进度条？
在本教程中，我们将学习如何使用 video.js 隐藏视频播放器的播放进度条。Video.js 允许您为各种视频格式（如 mp4、WebM 和 FLV）以及现代视频播放格式（如 YouTube、Vimeo、Flash 等）创建视频播放器。Video.js 由于其广泛的插件支持以及对各种设备（如台式机、移动设备等）的支持，被广泛应用于许多网站。
在本教程中，我们将通过禁用或隐藏视频播放器的控制栏来定制我们的视频播放器。隐藏视频播放器的播放进度条可以确保最终用户无法跳过视频，必须观看整个视频。当您试图播放广告视频时，这将非常有用。让我们继续本教程的下一部分，学习如何实现这一点。
隐藏 video.js 播放器中的播放进度条
为了隐藏 video.js 播放器的播放进度条，我们将使用 video.js 提供的 “progressControl” 选项引用。此选项引用具有多种方法，例如 disable() 或 hide()，分别用于禁用和隐藏进度条。
“progressControl” 属性可以用多种方式使用。在本教程中，我们将主要关注以下三种方法：
使用 “progressControl” 选项引用禁用播放进度条
使用 “progressControl” 选项引用隐藏播放进度条
通过移除进度控制栏的显示属性来隐藏播放进度条
让我们快速浏览一下每种方法
使用 “progressControl” 选项引用禁用播放进度条
前提条件 - 假设您知道如何使用 video.js 库创建一个基本的视频播放器。
我们可以使用视频播放器初始化时 progressControl 选项引用的 disable 方法完全禁用 video.js 播放器的播放进度条。
例如，如果您有一个 ID 为 my-video-player 的 Video.js 播放器，您可以这样禁用播放器的播放进度条：
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Disabling the progress control from the control bar
player.controlBar.progressControl.disable();
</script>
正如您在上面的代码片段中看到的，我们使用了 “controlBar.progressControl” 选项引用，它负责处理 progressBar 方法。我们使用了此选项引用的 'disable()' 方法来确保禁用视频播放器的播放进度条。
请注意，此方法将禁用播放进度条，而不是隐藏它。用户将看到播放进度条，但无法与其交互。
示例 1
隐藏 video.js 播放器播放进度条的完整示例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Hide Seek Bar in Video Player</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
preload="true"
muted="true"
autoplay="true"
width=580
height=350
data-setup='{}'
>
<source
src=" https://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Hide the progress control from the control bar
player.controlBar.progressControl.hide();
</script>
</body>
</html>
如何在 video.js 播放器中隐藏播放进度条？
首先，我们使用 video.js 的 CDN URL 导入与 video.js 相关的必要的 JS 和 CSS 文件。
接下来，我们在 <body> 部分内为我们的视频播放器创建了一个 <video> 元素，其中包含各种类，例如 'video.js vjs-default-skin vjs-big-play-centered' 和 'my-video-player' 作为视频 'id'。
我们还为 <video> 元素使用了一些标准的 HTML 视频选项，例如 muted 和 poster，并且使用了 fluid 属性来使视频播放器具有响应性。
接下来，我们为 ID 为 'my-video-player' 的视频元素初始化了一个视频播放器。
在示例的 <script> 部分中，我们在视频播放器初始化时使用了带有 disable 方法的 'controlBar.progressControl' 选项引用来禁用播放进度条。
当上述代码在 Web 浏览器中执行时，您会注意到视频播放器将具有播放进度条，但您无法与其交互或更改视频播放头的 位置。
使用上述选项引用，您可以禁用视频播放器的播放进度条。现在让我们继续本教程的下一部分，看看如何从视频播放器控件中隐藏或移除进度条。
使用 “progressControl” 选项引用隐藏播放进度条
为了隐藏视频播放器的播放进度条，我们还可以使用 “progressControl” 选项引用的另一种方法。就像我们在上面的示例中使用 disable 方法一样，我们也可以使用 hide 方法。hide 方法将隐藏视频控件中的播放进度条。
请考虑以下示例，该示例使用 'progressControl' 栏的 hide 方法隐藏 video.js 播放器的进度条：
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Hide the progress control from the control bar
player.controlBar.progressControl.hide();
</script>
在上面的代码片段中，我们使用了 controlBar.progressControl 选项引用，它负责处理 progressBar 方法。我们使用了此选项引用的 'hide()' 方法来确保隐藏视频播放器的播放进度条。
示例 2
隐藏 video.js 播放器播放进度条的完整示例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Hide Seek Bar in Video Player</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
preload="true"
muted="true"
autoplay="true"
width=580
height=350
data-setup='{}'
>
<source
src=" https://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Hide the progress control from the control bar
player.controlBar.progressControl.hide();
</script>
</body>
</html>
正如您在上面的示例中看到的，我们通过在视频播放器引用上使用 'controlBar.progressControl.hide()' 方法来更改视频播放器控制栏的可见性。
当上述代码在 Web 浏览器中执行时，您会注意到视频播放器的控制栏将被隐藏。
现在，让我们继续本教程的后续部分，介绍隐藏播放进度条的最终方法。
通过移除进度控制栏显示属性来隐藏播放进度条
在本教程的这一部分中，我们将学习如何通过更改样式属性来隐藏视频播放器的播放进度条。
我们可以使用 'progressControl' 方法上的 'el().style.display' 属性来更改播放进度条的显示。将其值设置为 none 将更改播放进度条的显示属性，并且播放进度条将被隐藏。这也可以使用 CSS 属性完成，但出于本教程的目的，我们将重点关注动态实现这一点。
请考虑以下更改播放进度条的显示以将其从 video.js 播放器中隐藏的代码片段。
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Setting the display style of progress bar to none
player.controlBar.progressControl.el().style.display = 'none';
</script>
正如您在上面的代码片段中看到的，我们将 contolBar progressControl 方法的 “style.display” 属性设置为 none。这将确保隐藏视频播放器的播放进度条。
示例 3
在完整的示例中使用上面的代码片段来隐藏 video.js 播放器的播放进度条将如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Hide Seek Bar in Video Player</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
preload="true"
muted="true"
autoplay="true"
width=580
height=350
data-setup='{}'
>
<source
src="https://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Initializing the video player with video options
const player = videojs('my-video-player');
// Setting the display style of progress bar to none
player.controlBar.progressControl.el().style.display = 'none';
</script>
</body>
</html>
在上面的示例中，我们通过将 'player.controlBar.progressControl.el().style.display' 的值设置为 none 来隐藏 video.js 播放器中的播放进度条。
当上述代码在 Web 浏览器中执行时，创建的视频播放器将没有播放进度条。
因此，这些是在 video.js 播放器中隐藏或禁用播放进度条的三种方法。
结论
在本教程中，我们了解了如何在 video.js 播放器中隐藏播放进度条。我们通过使用 video.js 提供的控制栏和进度控制选项引用的各种方法实现了这一点。我们借助三个完全可运行的示例，展示了实现此目标的三种方法。
4K+ 次浏览
