如何在 video.js 播放器中初始静音视频?


在本教程中,我们将学习如何在 video.js 播放器中初始静音视频。

在本教程中,我们不会使用像“muted”这样的标准 HTML 标签(这些标签可用于视频元素),而是将使用 video.js 特定的方法。因此,让我们继续本教程的后续部分,了解如何仅使用 video.js 在视频播放器中初始静音视频。

为了静音 video.js 播放器的视频,我们将使用 video.js 提供的“muted”方法和“volume”方法。我们可以使用此方法通过多种过程来静音我们的视频播放器。我们将主要关注以下内容:

  • 在“data-setup”属性中更改“muted”方法

  • 使用 Video.js 动态静音我们的视频播放器。

  • 使用“volume”方法静音我们的视频

让我们深入了解每种方法:

在“data-setup”属性中更改“muted”方法

“muted”方法接受布尔值作为参数,顾名思义,它可以静音或取消静音视频播放器的音量。

为了默认初始静音视频播放器,我们必须在“data-setup”属性中将“muted”方法的值设置为 true。请考虑以下代码片段以实现相同的效果。

<video id="my-video-player" class="video-js vjs-default-skin vjs-big-play-centered" controls="true" autoplay="true" preload="true" fluid="true" width=580 height=350 data-setup='{ "muted": true }' > <source src="https://tutorialspoint.com/videos/sample720.mp4" type="video/mp4" >

上面的代码片段为我们的 <video> 元素将“data-setup”属性中的“muted”选项设置为 true:

注意:由于 data-setup 属性接受 JSON 对象,请确保您在 data-setup 属性中传递有效的 JSON 字符串,否则代码将无法正常执行。

示例 1

使用 video.js 初始静音视频播放器的完整示例如下所示:

Open Compiler
<!DOCTYPE html> <html> <head> <title>Video.JS Mute Video by Default</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" autoplay="true" preload="true" fluid="true" width=580 height=350 data-setup='{ "muted": true }' > <source src="https://tutorialspoint.com/videos/sample720.mp4" type="video/mp4" > </video> <script> // Video Player Initialization let player = videojs('my-video-player'); </script> </body> </html>

在上面的代码中,我们实现了以下内容:

  • 首先,我们在 HTML 代码的 <head> 部分中使用了免费的 CDN URL 来导入 video.js 的必需 CSS 和 JS 文件。

  • 接下来,我们在 <body> 部分内为我们的视频播放器创建了一个 <video> 元素,它具有各种类,例如“video.js vjs-default-skin vjs-big-play-centered”和“my-video-player”作为视频“id”。

  • 我们还对 <video> 元素使用了一些标准的 HTML 视频选项,如 controls 和 poster,并且 fluid 属性用于使视频播放器响应式。请注意,我们没有使用标准的 HTML“muted”属性。

  • 相反,我们使用 video.js 在 <video> 标签的“data-setup”属性中将“muted”属性设置为 true。

当我们在 Web 浏览器中执行上述示例时,将创建一个视频播放器,该播放器最初将处于静音状态。

现在我们已经了解了如何使用 video.js 在初始化时静音视频,让我们学习如何使用 JavaScript 动态实现相同的功能。

使用 Video.js 动态静音我们的视频播放器

在本教程的这一部分中,我们将了解如何使用 JavaScript 为使用 video.js 创建的视频播放器动态静音视频播放器。

为了初始静音视频,我们需要在 JavaScript 中创建一个 JSON 对象,该对象将“muted”键作为 false(布尔值),然后在初始化视频播放器时将其传递给我们的视频播放器引用。

请考虑以下代码片段,以使用 JavaScript 动态静音视频播放器。

<script> // Muting Video Player using video options let videoOptions = { "muted": true }; // Video Player Initialization let player = videojs('my-video-player', videoOptions); </script>

在上面的代码片段中,我们通过将“muted”属性设置为 true 来静音 video.js 播放器中的视频,然后将其传递给我们的视频播放器引用的初始化,该引用具有“my-video-player”作为 id。

示例 2

在完整示例中使用上述代码片段将如下所示:

Open Compiler
<!DOCTYPE html> <html> <head> <title>Video.JS Mute Video by Default</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" autoplay="true" preload="true" fluid="true" width=580 height=350 data-setup='{ "muted": true }' > <source src="https://tutorialspoint.com/videos/sample720.mp4" type="video/mp4" > </video> <script> // Muting Video Player using video options let videoOptions = { "muted": true }; // Video Player Initialization let player = videojs('my-video-player', videoOptions); </script> </body> </html>

执行上述示例将在我们的 Web 浏览器中创建一个视频播放器,并且视频将默认处于静音状态,就像前面的示例一样。

因此,这是在 video.js 播放器中初始静音视频的第二种方法。现在让我们继续下一节,在下一节中我们将学习如何使用 volume 方法来静音视频。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

使用“volume”方法静音我们的视频

在本节中,我们将使用视频播放器引用可用的“volume”方法。“volume”方法将数值作为输入参数。此值是最初在视频播放器上设置的音量百分比。

我们将为视频播放器引用将音量百分比值设置为 0。请考虑以下代码片段以实现相同的效果:

<script> // Video Player Initialization let player = videojs('my-video-player'); // Setting the volume of video player player.volume(0); </script>

在上面的代码中,我们初始化了视频播放器,然后将初始音量设置为 0,因此我们的视频播放器将默认处于静音状态。

示例 3

在完整示例中添加上述代码片段将如下所示:

Open Compiler
<!DOCTYPE html> <html> <head> <title>Video.JS Mute Video by Default</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" autoplay="true" preload="true" fluid="true" width=580 height=350 > <source src="https://tutorialspoint.com/videos/sample720.mp4" type="video/mp4" > </video> <script> // Video Player Initialization let player = videojs('my-video-player'); // Setting the volume of video player player.volume(0); </script> </body> </html>

在上面的完整示例中,我们使用 volume 方法将默认音量设置为“0”。如果我们将此值设置为 50,则我们的视频播放器最初将以 50% 的音量开始。

执行此示例将在 Web 浏览器中创建一个视频播放器,该播放器将默认处于静音状态。

因此,这些是使用 video.js 静音视频播放器的三种方法,我们可以根据我们的用例使用上述任何一种方法。

结论

在本教程中,我们了解了如何在不使用标准 HTML“muted”属性的情况下初始静音 video.js 播放器中的视频。我们查看了使用 video.js 实现相同目标的三种方法,例如使用“volume”和“muted”video.js 选项引用。我们还为每种方法提供了一个完全有效的示例。

更新于: 2023 年 4 月 13 日

1K+ 次观看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告