如何在 video.js 播放器中隐藏进度条?

video.jshtml5 canvasweb development更新于 2024/3/31 0:44:17

在本教程中，我们将介绍如何使用 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>
    // 使用视频选项初始化视频播放器
    const player = videojs('my-video-player');
    
    // 从控制栏禁用进度控制
   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://www.cainiaomax.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 视频选项，例如静音和海报。元素和 fluid 属性已用于使视频播放器具有响应式功能。
接下来，我们为视频元素初始化了一个视频播放器，其 ID 为"my-video-player"。
在示例的 <script> 部分中，我们在视频播放器初始化过程中使用了带有 disable 方法的 'controlBar.progressControl' 选项引用来禁用进度条。

当在 Web 浏览器中执行上述代码时，您会注意到视频播放器将具有进度条，但您无法与其交互或更改视频播放头的位置。

使用上述选项引用，您可以禁用视频播放器的进度条。现在，让我们继续本教程的下一部分，了解如何隐藏或移除视频播放器控件中的进度条。

使用"progressControl"选项引用隐藏搜索栏

要隐藏视频播放器的搜索栏，我们还可以使用"progressControl"选项引用的另一种方法。就像我们在上例中使用 disable 方法一样，我们也可以使用 hide 方法。hide 方法将隐藏视频控件中的搜索栏或进度条。

请参考以下示例，使用"progressControl"的隐藏方法隐藏 video.js 播放器的进度条。-

<script>
// 使用视频选项初始化视频播放器
const player = videojs('my-video-player');

// 隐藏控制栏中的进度控件
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://www.cainiaomax.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()"方法来更改视频播放器控制栏的可见性。

当在网络浏览器中执行上述代码时，您会注意到视频播放器的控制栏将被隐藏。

现在，让我们继续在本教程的后续部分中讨论隐藏进度条的最后一个方法。

通过移除进度条的显示属性来隐藏进度条

在本教程的这一部分中，我们将学习如何通过更改样式属性来隐藏视频播放器的进度条。

我们可以通过使用"progressControl"方法中的"el().style.display"属性来更改进度条的显示。将其值设置为"none"将更改进度条的显示属性，并隐藏进度条。这也可以使用 CSS 属性来实现，但出于本教程的目的，我们将重点介绍如何动态实现这一点。

请考虑以下代码片段，该代码片段更改了搜索栏的显示方式，使其在 video.js 播放器中隐藏。

<script>
// 使用视频选项初始化视频播放器
const player = videojs('my-video-player');

// 将进度条的显示样式设置为"无"
player.controlBar.progressControl.el().style.display = 'none';
</script>

如上代码片段所示，我们将 controlBar 的 progressControl 方法的"style.display"属性设置为"无"。这将确保视频播放器的滑动条被隐藏。

示例 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://www.cainiaomax.com/videos/sample720.mp4"
      type="video/mp4"
   >
   </video>
   <script>
      // 使用视频选项初始化视频播放器
      const player = videojs('my-video-player');

      // 设置进度条显示样式为无 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 公开的控制栏和进度控制选项引用的各种方法实现了相同的效果。我们借助三个完整的示例，了解了三种实现相同效果的方法。

打印下一节:Video.js – 当视频缓冲达到 50% 时回调函数 ❯❮ 上一节:如何在 video.js 播放器中播放特定时间的视频?

技术文章和资源

热门类别

如何在 video.js 播放器中隐藏进度条?

隐藏 Video.js 播放器中的进度条

使用"progressControl"选项参考禁用搜索栏

示例 1

使用"progressControl"选项引用隐藏搜索栏

示例 2

通过移除进度条的显示属性来隐藏进度条

示例 3

总结

相关文章

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！