如何在 video.js 播放器中初始静音视频?
在本教程中，我们将学习如何在 video.js 播放器中初始静音视频。
在本教程中，我们不会使用视频元素可用的标准 HTML 标签(例如"muted")，而是使用 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://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
上面的代码摘录，将 <video> 元素的 'data-setup' 属性中的 'muted' 选项设置为 true -
注意 - 由于 data-setup 属性接受 JSON 对象，请确保在 data-setup 属性中传递的是有效的 JSON 字符串，否则代码将无法正常执行。
示例 1
使用 video.js 首次静音视频播放器的完整示例如下所示 -
<!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://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
let player = videojs('my-video-player');
</script>
</body>
</html>
在开销代码中，我们实现了以下内容:
首先，我们使用免费的 CDN URL 在 HTML 代码部分导入 video.js 所需的 CSS 和 JS 文件。
接下来，我们在 <body> 部分中为视频播放器创建了一个 <video> 元素，其中包含各种类，例如"video.js vjs-default-skin vjs-big-play-centered"和"my-video-player"作为视频"id"。
我们还使用了一些标准的 HTML 视频选项，例如 <video> 元素的控件和海报，并使用了 fluid 属性使视频播放器具有响应式功能。请注意，我们没有使用标准 HTML 的"muted"属性。
相反，我们使用 video.js 在 <video> 的"data-setup"属性中设置"muted"属性。标签，设置为 true。
当我们在 Web 浏览器中执行上述示例时，将创建一个视频播放器，该播放器初始状态为静音。
现在我们已经了解了如何使用 video.js 在初始化时将视频静音，接下来让我们学习如何使用 JavaScript 动态实现相同的效果。
使用 Video.js 动态静音视频播放器
在本教程的这一部分，我们将了解如何使用 JavaScript 为使用 video.js 创建的视频播放器动态静音。
为了初始静音视频，我们需要在 JavaScript 中创建一个 JSON 对象，其"muted"键设置为 false(布尔值)，然后在初始化视频播放器时将此 JSON 对象传递给视频播放器引用。
请考虑以下使用 JavaScript 动态静音视频播放器的代码片段。
<script>
// 使用视频选项静音视频播放器
let videoOptions = { "muted": true };
// 视频播放器初始化
let player = videojs('my-video-player', videoOptions);
</script>
在上面的代码中，我们将 video.js 播放器中的"muted"属性设置为 true，并将其传递给视频播放器引用的初始化方法，该引用的 id 为"my-video-player"。
示例 2
在完整的示例中使用上述代码片段将如下所示 -
<!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://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 使用视频选项静音视频播放器
let videoOptions = { "muted": true };
// 视频播放器初始化
let player = videojs('my-video-player', videoOptions);
</script>
</body>
</html>
执行上述示例将在我们的网络浏览器中创建一个视频播放器，并且默认情况下视频将静音，与上一个示例完全相同。
以上是在 video.js 播放器中初始静音视频的第二种方法。现在，让我们进入下一部分，学习如何使用"volume"方法将视频静音。
使用"volume"方法将视频静音
在本节中，我们将使用视频播放器引用的"volume"方法。volume 方法接受一个数值作为输入参数。该值是视频播放器初始设置的音量百分比。
我们将为视频播放器引用将音量百分比值设置为 0。请参考以下代码片段来实现相同的效果 -
<script>
// 视频播放器初始化
let player = videojs('my-video-player');
// 设置视频播放器的音量
player.volume(0);
</script>
在上面的代码中，我们初始化了视频播放器，然后将初始音量设置为 0，因此视频播放器默认处于静音状态。
示例 3
将上述代码片段添加到完整的示例中，如下所示 -
<!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://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 视频播放器初始化
let player = videojs('my-video-player');
// 设置视频播放器的音量
player.volume(0);
</script>
</body>
</html>
在上面的完整示例中，我们使用了volume方法将默认音量设置为"0"。如果我们将此值设置为50，则视频播放器的初始音量将为50%。
执行此示例将在Web浏览器中创建一个默认静音的视频播放器。
以上就是使用video.js静音视频播放器的三种方法，我们可以根据实际使用情况使用上述任何一种方法。
总结
在本教程中，我们了解了如何在不使用标准HTML"muted"属性的情况下在video.js播放器中初始静音视频。我们研究了使用video.js实现相同效果的三种方法，例如使用video.js选项引用的"volume"和"muted"。我们还为每种方法提供了一个完整的示例。
